Javascript Death Star :)
Известная станция из "Звёздных войн", на самом деле, просто ещё один пример на окружность и градиент средствами Javascript. Ниже приводится картинка и код, всё зависит от базового размера size
, хотя пропорции можно было бы выдержать и поточнее.
<div align="center"> <canvas id="starCanvas" width="280" height="280" style="border:1px solid gray;"> <p>Извините, ваш браузер не поддерживает тег canvas</p> </canvas> <script type="application/javascript"> var size = 280; //базовый размер = размеру стороны канвы //Создать канву и залить фоновым цветом var c = document.getElementById("starCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "#111111"; ctx.fillRect(0,0,size,size); //Внешняя окружность с градиентом var grad = ctx.createRadialGradient(Math.round(0.9*size),Math.round(0.7*size),Math.round(0.75*size), Math.round(0.9*size),Math.round(0.6*size),Math.round(0.5*size)); grad.addColorStop(0,"#EEEEEE"); grad.addColorStop(1,"black"); ctx.fillStyle = grad; ctx.beginPath(); ctx.arc(Math.round(0.5*size),Math.round(0.5*size),Math.round(3/7*size),0,2*Math.PI); ctx.fill(); //Внутренняя окружность с градиентом var grad = ctx.createLinearGradient(75,90,102,90); grad.addColorStop(0,"black"); grad.addColorStop(1,"gray"); ctx.fillStyle = grad; ctx.beginPath(); ctx.arc(Math.round(3/8*size),Math.round(3/8*size),Math.round(1/8*size),0,2*Math.PI); ctx.fill(); //Чёрный кружок ctx.fillStyle = "black"; ctx.beginPath(); ctx.arc(Math.round(1/3*size),Math.round(3/8*size),Math.round(0.07*size),0,2*Math.PI); ctx.fill(); </script> <noscript> <p>Для работы приложения нужен включённый в браузере Javascript!</p> </noscript> </div>
05.07.2016, 21:53 [5209 просмотров]