Canvas - 新形状出错 colors

Question

我试图制作一个小游戏，其中有几个形状不同的 colors，但我遇到了一个问题，我设法归结为这个 js 代码：

const canvas = document.querySelector("canvas")
canvas.width = window.innerWidth;
canvas.height = window.innerHeight

const context = canvas.getContext("2d")

context.beginPath()
context.arc(canvas.width/2, canvas.height/2, 30, 0, 2*Math.PI, false)
context.fillStyle = 'blue'
context.fill()

context.beginPath()
context.fillRect(canvas.width/2, canvas.height/2, 100, 30)
context.fillStyle = 'green'
context.fill()

我创建了一个蓝色圆圈，然后我想创建一个绿色矩形，但无论出于何种原因，矩形都会从圆圈中获取颜色并绘制为蓝色。

没有按照我的意愿更改 fillStyle 的原因可能是什么？

Answer 1

您需要更改调用顺序。 首先设置fillStyle和fillRect

请参阅工作示例： https://jsfiddle.net/dw5u9etk/

const context = canvas.getContext("2d")

context.beginPath()
context.arc(canvas.width/2, canvas.height/2, 30, 0, 2*Math.PI, false)
context.fillStyle = 'blue'
context.fill()

context.beginPath()
context.fillStyle = 'green' // I only moved this line up
context.fillRect(canvas.width/2, canvas.height/2, 100, 30)
context.fill()

Answer 2

fillRect()在上下文的子路径之外绘制一个新的rect并直接填充它。

当您调用最后一个fill()时，上下文的子路径为空。

你可以用rect()代替这个方法，

 const canvas = document.querySelector("canvas"); const context = canvas.getContext("2d") context.beginPath() context.arc(canvas.width/2, canvas.height/2, 30, 0, 2*Math.PI, false) context.fillStyle = 'blue' context.fill() context.beginPath() context.rect(canvas.width/2, canvas.height/2, 100, 30) context.fillStyle = 'green' context.fill()

 <canvas></canvas>

或者，如果在调用fillRect()之前移动fillStyle分配，则可以删除beginPath() + fill()调用：

 const canvas = document.querySelector("canvas"); const context = canvas.getContext("2d") context.beginPath() context.arc(canvas.width/2, canvas.height/2, 30, 0, 2*Math.PI, false) context.fillStyle = 'blue' context.fill() context.fillStyle = 'green' context.fillRect(canvas.width/2, canvas.height/2, 100, 30)

 <canvas></canvas>