javascript - 在 html5 中构建色轮

Question

我只是在学习有关 html5 canvas 的一些细节，并且在进行过程中，我正在尝试通过楔形构建一个简单的色轮(一次构建一个 1 度的楔形并将其添加到 360 度)。但是，我在渐变上得到了一些奇怪的标记，如下图所示:

.

这是产生色轮的 fiddle :http://jsfiddle.net/53JBM/

特别是，这是 JS 代码:

var canvas = document.getElementById("picker");
var context = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 100;
var counterClockwise = false;

for(var angle=0; angle<=360; angle+=1){
    var startAngle = (angle-1)*Math.PI/180;
    var endAngle = angle * Math.PI/180;
    context.beginPath();
    context.moveTo(x, y);
    context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
    context.closePath();
    context.fillStyle = 'hsl('+angle+', 100%, 50%)';
    context.fill();
}

如果有人能指出我做错了什么，或者如果有更好的方法来完成我正在尝试做的事情，我将不胜感激:)

Answer 1

这对你来说足够了吗，请检查

var startAngle = (angle-2)*Math.PI/180;