圆圈,如何在多个画布上绘制圆圈html5?"/>
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工作正常佩拉。
希望这有助于!
更多推荐
html 画几排圆圈,如何在多个画布上绘制圆圈html5?
发布评论