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 に答える