HTML Canvas，如何为绘制的圆圈添加边框答案

【问题标题】：HTML Canvas, how to add a border to the circle that is drawnHTML Canvas，如何为绘制的圆圈添加边框
【发布时间】：2021-08-04 03:50:56
【问题描述】：

我在画布游戏中为我的玩家创建了一个类，一个圆，我想添加一个实心边框，以便我可以使用 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");
}

【问题讨论】：

标签： javascript canvas html5-canvas

【解决方案1】：

您还需要context.stroke(); 来绘制笔触（“圆圈的边框”）。

【讨论】：