无法在 HTML canvas 上绘制圆圈

Question

我一直在 HTML canvas 上画矩形很好，但我的项目也需要使用圆圈，这似乎不起作用。矩形是这样绘制的：

var myGameArea = {
    canvas: document.createElement("canvas"),
    start: function () {
        this.canvas.width = 300;
        this.canvas.height = 500;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    }
}

function component(width, height, color, x, y, ) {
   this.width = width;
   this.height = height;
   this.x = x;
   this.y = y;

   ctx = myGameArea.context;
   ctx.fillStyle = color;
   ctx.fillRect(this.x, this.y, this.width, this.height);
}

如何用类似的方法画圆？

Answer 1

一个很好的起点是 HTML Canvas 参考：https://www.w3schools.com/tags/ref_canvas.asp 它为这个特定问题提供了提示，甚至为您的项目的进一步要求提供了提示。

根据此参考文献，您的特定问题可以使用 arc() 方法解决。 https://www.w3schools.com/tags/canvas_arc.asp

如果你想填充它，提到的 fill() 方法有帮助：https://www.w3schools.com/tags/canvas_fill.asp

希望解决了这个问题和进一步的挑战。

无法在 HTML canvas 上绘制圆圈

Trouble Drawing Circles on an HTML canvas

html

javascript

geometry

canvas

html5-canvas