динамическое обновление HTML5 холст

Question

в фрагменте ниже

ctx.clearRect(0, 0, canvas.width, canvas.height); 
ctx.beginPath(); 
ctx.arc(canvas.width/2, canvas.height/2, 143, (startAngle * Math.PI/180) - Math.PI/2, 1.5 * Math.PI); 
ctx.strokeStyle = "white"; 
ctx.lineWidth = 14; 
ctx.stroke(); 

, где я в кратные 6, я не могу обновить холст каждый второй (используя петли), внешний вид должен быть как из отводящей Часы. ссылки на скрипку: https://jsfiddle.net/727q1u7r/3/

Answer 1

в вашем fiddle, код внутри цикла не относится к startAngle, поэтому каждой итерации цикла рисует то же самое. Вероятно, вы захотите обратиться к startAngle в дуговом вызове.

Однако этого само по себе недостаточно, цикл for не подходит для анимации, весь цикл будет завершен в мгновение ока, и вы не увидите никаких изменений.

Вы можете использовать setInterval, как показано на странице this fiddle.

Если вы пытаетесь достоверно показать системное время, вы должны изучить использование Date и, возможно, используя requestAnimationFrame.