javascript - 如何在多个 Canvas html5上绘制圆圈？

Question

我想使用 javascript 在响应式 Canvas 上绘制圆圈。我正在获取 Canvas 的宽度和高度，但由于 div 标签的宽度和高度 %，我能够正确绘制圆圈。 div 标签的宽度和高度以 % 为单位，因为我想在单个页面上显示 5 个 Canvas 。有没有其他方法可以在单页上放置 5 个 Canvas 并使用 Canvas 的高度和宽度在每个 Canvas 中绘制一个圆圈？还有一件事，我不想要绝对位置，因为我想根据浏览器宽度更改 Canvas 位置

图片:192.168.10.29/1.png

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

你可以先用你所有的 Canvas 定义一个数组:

/// 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')
]

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

然后引用。你的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;
}

Chrome 似乎在 CSS 方面存在问题(或者在 getComputedStyle() 的情况下可能是个问题)，但它在 Firefox 和 Opera 中运行良好。

Fiddle here

希望这对您有所帮助!