HTML画布，如何为绘制的圆圈添加边框

Question

我已经为我的玩家创建了一个类，一个圆圈，在一个画布游戏中被绘制，并且想要添加一个实体边界，这样我就可以使用RGBA在我的游戏中添加一些额外的样式。

看看MDN的文章:https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeStyle

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors

我应该能够使用strokeStyle来创建一个边框，但它并没有给我想要的结果，一个白色的圆圈带一个蓝色的边框，只是一个白色的圆圈。

边界是不是一个正确的变量?还是我遗漏了什么?

class Player {
constructor(x, y, radius, color, border) {
this.x = x;
this.y = y;
this.radius = radius;
this.color = color;
this.border = border;
}
draw() {
context.beginPath();
context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
context.fillStyle = this.color;
context.strokeStyle = this.border;
context.fill();
}
}
let newPlayer1 = new Player(canvas.width / 2, canvas.height / 2, 10, "white", "blue");
function init() {
newPlayer1 = new Player(canvas.width / 2, canvas.height / 2, 10, "white", "blue");
}

Answer 1

您还需要context.stroke();来绘制笔画("圆圈的边界")。