在 HTML 画布上绘制圆圈时遇到问题 [重复]

Question

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

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 画布参考是一个很好的起点：https://www.w3schools.com/tags/ref_canvas.asp 它为这个特定问题提供了提示，甚至为您的项目的进一步要求提供了提示。

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

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

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