圈的重叠怎么用html做出来,javascript – 如何使用HTML5画布生成彩虹圈？

这不完美(由于绘图步骤……),但它可以帮助您：

http://jsfiddle.net/afkLY/2/

HTML：

使用Javascript：

var canvas = document.getElementById("colors");

var graphics = canvas.getContext("2d");

var CX = canvas.width / 2,CY = canvas.height/ 2,sx = CX,sy = CY;

for(var i = 0; i < 360; i+=0.1){

var rad = i * (2*Math.PI) / 360;

graphics.strokeStyle = "hsla("+i+",100%,50%,1.0)";

graphics.beginPath();

graphics.moveTo(CX,CY);

graphics.lineTo(CX + sx * Math.cos(rad),CY + sy * Math.sin(rad));

graphics.stroke();

}

该想法是逐行绘制具有对应于线方向的色调值的盘.

您可以通过向rad变量添加半径角来更改颜色基础旋转(将-pi / 2添加到rad会使渐变看起来像您的图形).