создание цветного колеса в html5

Я просто изучаю некоторые подробности о холсте html5, и в процессе, я пытаюсь создать простое колесо цвета клиньями (постройте клин на 1 градус за раз и добавьте его до 360 степень). Тем не менее, я получаю некоторые странные метки на градиенте, как показано на следующем изображении:создание цветного колеса в html5

wierd color marks .

Вот скрипка, которая произвела Colorwheel: 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(); 
}

Если кто-то может указать на то, что я делаю неправильно, или если есть лучше способ сделать то, что я пытаюсь сделать это было бы оценено :)

источник

2013-08-16 FurtiveFelon

этого достаточно для вас, пожалуйста, проверьте

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

источник

2013-08-16 04:36:18

Есть ли у вас какие-либо идеи, почему это работает, и -1 не? Я хотел бы знать причину. – FurtiveFelon

Это похоже на работу – Markasoftware

Ваш рисунок дуги. правильно? Проверьте координаты дуг. –

Попробуйте это отлично. Спасибо, кстати, это именно то, что я пытался сделать.

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); 
 
\t gradient.addColorStop(0,'hsl('+angle+', 10%, 100%)'); 
 
\t gradient.addColorStop(1,'hsl('+angle+', 100%, 50%)'); 
 
    context.fillStyle = gradient; 
 
    context.fill(); 
 
}

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

источник

2015-04-04 22:21:12 shoo

создание цветного колеса в html5

ответ

Смежные вопросы