如何在多画布html5上绘制圆圈？

Question

我想用javascript在响应画布上画一个圆圈。我得到了画布的宽度和高度，但由于div标签的宽度和高度%，我能够正确地画出圆圈。div标记的宽度和高度以%为单位，因为我想在单个页面上显示5个画布。是否有其他方法可以在一页上放置5块画布，并使用画布的高度和宽度在每个画布上画一个圆圈？还有一件事，我不想要绝对位置，因为根据浏览器的宽度，我想要改变画布的位置

图片：192.168。10.29/1.巴布亚新几内亚

CSS

.all
{
    width:30%;
    height:45%;
    float:left;
}

canvas
{
    width:100%;
    height:100%;
}

HTML

<div id='container'>
<div class='all'>
<canvas id='clock1' style="border:solid">
</div>
<div class='all'>
<canvas id='clock2' style="border:solid">
</div>
<div class='all'>
<canvas id='clock3' style="border:solid">
</div>
<div class='all'>
<canvas id='clock4' style="border:solid">
</div>
<div class='all'>
<canvas id='clock5' style="border:solid">
</div>
</div>

Javascript

function draw(canvasarray)
{

    var clock = document.getElementById(canvasarray);

    var style = getComputedStyle(document.getElementById(canvasarray));

    var height = parseInt(style.getPropertyValue("height"),10);
    var width = parseInt(style.getPropertyValue("width"),10);

    var radius = 0;

    console.log('Width : ' + width + ' Height : ' + height);

    if(width < height)
    {
        radius = width/2;
    }
    else
    {
        radius = height/2;
    }
    console.log('Radius : '+ radius);
    var ctx = clock.getContext('2d');
    ctx.beginPath();
    ctx.arc(width/2,height/2,radius,0,Math.PI*2);
    ctx.stroke();
}

Answer 1

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

/// 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在Firefox和Opera中运行良好，但它似乎在CSS（或者getComputedStyle（））方面存在问题。

在这里拉小提琴

希望这有帮助！