Question

我有一个简单的脚本，可以根据给定的分钟数为需要绘制的每个时钟向div容器添加一个新的画布。该脚本将不遗余力地绘制画布元素，并在最后一个画布元素中绘制钟面，但是不会在任何先前的画布元素上绘制钟面。在查看控制台后，带或不带时钟面的画布元素的输出都是相同的。不知道这是怎么回事。下面是带有我的代码的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();
}

任何帮助将不胜感激。

Answer 1

它同时绘制了它们，但是设置父级的innerHTML会覆盖除最后一个以外的所有内容。设置innerHTML不会保留现有元素，而是使新元素具有相同的属性-但同时您没有更新任何内容。

代替尝试：

for(var q = 1; q <= clockNum; q++) {
    holder.innerHTML += '<canvas id="sample-'+q+'" width="35" height="35"></canvas>';
}

for(var q = 1; q <= clockNum; q++) {
    drawClock('sample-'+q);
}

您还可以先使用document.createElement，然后再使用holder.append。

Canvas 2d仅显示一系列元素中的最后一个图形

1 个答案: