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 [5163 просмотра]