Радужный круг и радуга на Javascript

Решили мы со Златой нарисовать большой красивый радужный круг, точней, радужный компакт-диск.

И нарисовали :)

Исходник прикреплён ниже, для увеличения диаметра круга просто увеличьте размеры канвы в теге <canvas>. Листинг, конечно же, нужно сохранить как файл типа .html

<div align="center">
 <canvas id="rbId" width="512" height="512"></canvas>
</div>
<script type="text/javascript">
var cvs = document.getElementById("rbId");
var gx = cvs.getContext("2d");
var CX = cvs.width / 2, CY = cvs.height/ 2, sx = CX, sy = CY;

for (var i = 0; i < 360; i+=0.05){
 var rad = i * (2*Math.PI) / 360;
 var grd = gx.createLinearGradient (CX, CY, CX + sx * Math.cos(rad), CY + sy * Math.sin(rad));
 grd.addColorStop(0, "white");
 grd.addColorStop(0.05, "white");
 grd.addColorStop(0.15, "hsla(" + i + ", 100%, 50%, 1.0)");
 grd.addColorStop(1, "hsla(" + i + ", 100%, 50%, 1.0)");
 gx.strokeStyle = grd;
 gx.beginPath();
 gx.moveTo(CX, CY);
 gx.lineTo(CX + sx * Math.cos(rad), CY + sy * Math.sin(rad));
 gx.stroke();
}
</script>
<noscript><div align="center">Извините, у вас выключен Javascript</div></noscript>

<div align="center">
<canvas id="rbId2" width="512" height="256"></canvas>
</div>
<script type="text/javascript">
 var cvs=document.getElementById("rbId2");
 var ctx=cvs.getContext("2d");
 var cw=cvs.width;
 var ch=cvs.height;
 var rr=Math.min(cw,ch);
 var cx=cw/2;
 var cy=ch/2;
 var grd = ctx.createRadialGradient(cx,ch,rr/2,cx,ch,rr);
 var stop=1/8;
 grd.addColorStop (stop*0, 'white');
 grd.addColorStop (stop*1, 'magenta');
 grd.addColorStop (stop*2, 'blue');
 grd.addColorStop (stop*3, 'cyan');
 grd.addColorStop (stop*4, 'green')
 grd.addColorStop (stop*5, 'yellow');
 grd.addColorStop (stop*6, 'orange');
 grd.addColorStop (stop*7, 'red');
 grd.addColorStop (stop*8, 'white');
 ctx.fillStyle = grd;
 ctx.fillRect(0,0,cw,ch);
 ctx.fill();
</script>
<noscript><div align="center">Извините, у вас выключен Javascript</div></noscript>

Здесь цели вписать в канву любого размера не было, но всё равно рисуется от середины.

Это тоже можно сохранить и выполнить как файл с расширением .html

P.S.-2020. Пишут, что последний код не работает в Firefox. Да, действительно, Mozilla что-то успела намудрить с радиальным градиентом. После перечисления "по возрастанию" первого аргумента функции addColorStop у меня всё сработало, листинг изменён.

08.04.2017, 13:49 [4338 просмотров]