5

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

奇怪的颜色标记.

这是产生色轮的小提琴：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();
}

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

4

3 回答 3

8

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

var startAngle = (angle-2)*Math.PI/180;
于 2013-08-16T04:36:18.937 回答
6

试试这个，看起来很棒。顺便说一句，这正是我想要做的。

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>

于 2015-04-04T22:21:12.477 回答
0

类似的方法，只是为了颜色

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>

编辑：这里的完整项目：https ://github.com/dersimn/jquery-colorwheel

于 2018-07-21T11:36:50.837 回答