Question

我正在学习关于html5画布的一些细节，并且在进展中，我试图通过楔子构建一个简单的色轮（一次构建一个1度的楔形并将其加到360度）。但是，我在渐变上得到一些奇怪的标记，如下图所示：

wierd color marks

特别是，这是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;

Answer 2

试试这个看起来很棒。感谢这正是我想要的方式。

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-2)*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();
    var gradient = context.createRadialGradient(x, y, 0, x, y, radius);
	gradient.addColorStop(0,'hsl('+angle+', 10%, 100%)');
	gradient.addColorStop(1,'hsl('+angle+', 100%, 50%)');
    context.fillStyle = gradient;
    context.fill();
}

<body>
  <canvas id="picker"></canvas>
</body>

Answer 3

相似的方法，只针对颜色

var canvas = document.getElementById("picker");
var context = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 50;
var thickness = 0.6;

for(var angle=0; angle<=360; angle+=1){
    var startAngle = (angle-2)*Math.PI/180;
    var endAngle = angle * Math.PI/180;
    context.beginPath();
    context.arc(x, y, (1-thickness/2)*radius, startAngle, endAngle, false);
    context.lineWidth = thickness*radius;
    context.strokeStyle = 'hsl('+angle+', 100%, 50%)';
    context.stroke();
}

<body>
  <canvas id="picker"></canvas>
</body>

编辑：此处为完整项目：

在html5中构建色轮

3 个答案: