如何解决这个 canvas fillStyle 问题？

Question

class Entity {
  constructor(name, type = 'player') {
    this.name = name,
      this.type = type
  }
  newObject(name, ...pvals) {
    this[name] = {}
    if (pvals) {
      for (var i = 0; i < pvals.length; i += 2) {
        this[name][pvals[i]] = pvals[i + 1]
      }
    }
  }
}

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')

canvas.height = window.innerHeight - 20
canvas.width = window.innerWidth

var frame = new Entity('frame', 'game-object')
var button = new Entity('button', 'player-component')

const radius = 70
var speed = 3

frame.newObject('$', 'r', radius)
button.newObject('$', 'r', radius / 3)

function updateFrame() {
  ctx.fillStyle = 'black'
  ctx.arc((canvas.width / 2), (canvas.height / 2), frame.$.r, 0, Math.PI * 2)
  ctx.fill()
  ctx.fillStyle = 'red'
  ctx.arc((canvas.width / 2), (canvas.height / 2), button.$.r, 0, Math.PI * 2)
  ctx.fill()
}

updateFrame()

<canvas></canvas>

据我所知，它应该在 canvas 的中间打印黑色大圆圈，在那个红色小圆圈之上。但它只是打印一个大红色圆圈。我就是想不通。

Answer 1

就像@Teemu 在评论“开始路径”中指出的那样，当您更改颜色时，您必须在弧之间使用 ctx.beginPath()

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/beginPath#examples

我简化了您的许多代码以仅显示问题，您在排除故障时也应该这样做class Entity只是分散注意力，我们可以在没有它的情况下重现

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')

ctx.beginPath()
ctx.fillStyle = 'black'
ctx.arc(50, 50, 20, 0, Math.PI * 2)
ctx.fill()

ctx.beginPath()
ctx.fillStyle = 'red'
ctx.arc(50, 50, 10, 0, Math.PI * 2)
ctx.fill()

<canvas></canvas>

Answer 2

您应该添加这两行：

ctx.beginPath();
ctx.closePath();

function updateFrame() {
  ctx.beginPath();
  ctx.fillStyle = 'black'
  ctx.arc((canvas.width / 2), (canvas.height / 2), frame.$.r, 0, Math.PI * 2)
  ctx.closePath();
  ctx.fill();
  ctx.beginPath();
  ctx.fillStyle = 'red'
  ctx.arc((canvas.width / 2), (canvas.height / 2), button.$.r, 0, Math.PI * 2)
  ctx.closePath();
  ctx.fill()
}

如何解决这个 canvas fillStyle 问题？

How to solve this canvas fillStyle problem?

javascript

html5-canvas