html 画几排圆圈,如何在多个画布上绘制圆圈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')

]

现在，这将继续给每个时钟画布的引用，因此我们不必每次都找一找。

然后REF。您previous question我们可以从抽奖代码分开调整大小代码：

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;

}

铬似乎与CSS的问题，但(或getComputedStyle()在这种情况下，它可能是一个问题)，而它在Firefox和O工作正常佩拉。

希望这有助于！