Question

因此，我想做一个蛇形游戏作为一个初学者项目，以使自己投入到游戏制作中，这就是我首先要编写代码的主要原因。

我做了画布，过了一会儿，我得到了它与边框一起出现。但是，画布的背景不会改变，我不确定为什么。

我尝试使用JSHint，但这不是很有帮助。

<canvas id="gameCanvas" width="700" height="600" backgroundColor="yellow" style="border:4px solid black;">Good morning</canvas>

Answer 1

您需要在style属性中指定背景颜色，如下所示：

 style="border:4px solid black; background-color: yellow"

请参见下面的演示

<canvas id="gameCanvas" width="700" height="600" style="border:4px solid black; background-color: yellow">Good morning</canvas>

Answer 2

这里有两个选项：使用CSS设置背景颜色或使用JS用彩色矩形填充画布。

HTML样式中的CSS：

style="border:4px solid black; background: yellow;"

JS：

let canvas = document.getElementById('gameCanvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = 'yellow';
ctx.fillRect(0,0,canvas.width, canvas.height);

为什么不能更改画布的背景？

2 个答案: