Question

我正在尝试使用html5画布制作一个圆圈。但是，使用我的下面的代码，它不会形成一个圆形，只会形成蛋形。

HTML

<canvas id="canvas"></canvas>

CSS

#canvas {
        display: block;
        width: 370px;
        height: 622px;
        margin: 0 auto;
        background-color: #ccc;
    }

JS

    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');


    context.beginPath();
    context.fillStyle = '#bb0000';
    context.arc(100, 100, 20, 0, Math.PI * 2, true);
    context.closePath();
    context.fill();

如何使用html5画布制作一个合适的圆圈？

Answer 1

您的JavaScript完全正确，您的圈子的形状是由您的CSS引起的。画布的行为类似于图像，并且因为画布本身没有指定大小，所以它使用默认大小来显示上下文，然后由CSS调整大小。

只需更改#canvas元素的大小：

<canvas id="canvas" width="370" height="622"></canvas>

的 Fiddle

html5画布圈问题

1 个答案: