如何在多个画布HTML5上绘制圆？

您可以首先使用所有画布定义一个数组：

/// store references to element directly - define in global scope
var canvasArray = [
    document.getElementById('clock1'),
    document.getElementById('clock2'),
    document.getElementById('clock3'),
    document.getElementById('clock4'),
    document.getElementById('clock5')
]

现在，这将保留对每个时钟画布的引用，因此我们不必每次都查找它们。

然后参考。您上一个问题，我们可以将大小调整代码与绘制代码分开：

function resizeCanvases() {

    /// iterate array and update each canvas' bitmap according to CSS size
    for(var i = 0, c; c= canvasArray[i]; i++) {
        var style = getComputedStyle(c);
        c.width   = parseInt(style.getPropertyValue("width"),10);
        c.height  = parseInt(style.getPropertyValue("height"),10);
    }

    draw(canvasArray);
}

/// initial call when code starts
resizeCanvases();

/// update when window resizes (remember to redraw as well)
window.addEventListener('resize', resizeCanvases, false);

现在我们可以专注于绘制代码：

function draw(clocks) {

    var clock,
        ctx,
        width, height,
        radius,
        i = 0;

    for(; clock = clocks[i]; i++) {

        /// get dimension of this canvas - remember to subtract line width
        width = clock.width;
        height = clock.height;

        /// get radius
        radius = Math.min(width, height) * 0.5;

        /// draw circle
        ctx = clock.getContext('2d');
        ctx.beginPath();
        ctx.arc(width/2,height/2,radius,0,Math.PI*2);
        ctx.stroke();
    }
}

然后致电：

draw(canvasArray);

需要的时候。

更新资料

参考 图片中的问题。我有这个结果：

我稍微修改了CSS，但是它不会影响外观，但是使重排效果更好：

.all
{
    width:30%;
    height:45%;
    display:inline-block;
    /*float:left;*/
}

以及：

html, body {
    width:100%;
    height:100%;
    margin:0;
    overflow:hidden;
}

Chrome似乎在CSS上有问题（或者getComputedStyle()在这种情况下可能是个问题），而在Firefox和Opera中却可以正常工作。

在这里摆弄

希望这可以帮助！