html5 Canvas 圈问题

Question

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

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 canvas制作一个合适的圆圈？

Answer 1

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

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

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

Fiddle