html - html5画布圈问题

Question

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

jsfiddle

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