这不完美(由于绘图步骤……),但它可以帮助您:
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会使渐变看起来像您的图形).