У меня есть простой скрипт, который добавляет новый холст в контейнер div для каждых часов, которые должны быть нарисованы в зависимости от количества минут. Скрипт будет рисовать элементы холста в обязательном порядке и рисовать циферблат в последнем элементе холста, однако он не будет рисовать циферблат на любых предыдущих элементах холста. При просмотре консоли вывод идентичен для элементов canvas как с циферблатом, так и без него. Не уверен, что происходит с этим. Ниже приведен JSFiddle с моим кодом.
https://jsfiddle.net/1oxfgwkb/
HTML
<html>
<body>
<div id="clockHolder"></div>
</body>
</html>
JavaScript
var time = 115;
var holder = document.getElementById("clockHolder");
var clockNum = Math.ceil((time / 60));
for(var q = 1; q <= clockNum; q++) {
var clockFace = 'sample-'+q;
holder.innerHTML += '<canvas id="'+clockFace+'" width="35" height="35"></canvas>';
drawClock(clockFace);
}
function drawClock(clockFace) {
var c = document.getElementById(clockFace);
var ctx = c.getContext("2d");
var radius = (c.height / 2) * 0.9;
var midpoint = c.height / 2;
for(var i=1; i<=12; i++) {
var angle = (i*30) * Math.PI / 180;
ctx.save();
ctx.strokeStyle = 'rgba(100,100,100,0.75)';
ctx.beginPath();
ctx.translate(midpoint, midpoint);
ctx.rotate(angle);
ctx.translate(0, -radius*0.9);
ctx.moveTo(0,0);
ctx.lineTo(0,4);
ctx.stroke();
ctx.closePath();
ctx.restore();
}
ctx.strokeStyle = '#555';
ctx.beginPath();
ctx.arc(midpoint, midpoint, radius*0.9, 0, 2 * Math.PI);
ctx.stroke();
}
Любая помощь будет принята с благодарностью.