canvas设置画布背景颜色

在HTML5中，`canvas`元素允许我们绘制各种图形，并能动态修改其内容。要更改`canvas`背景的颜色，可以通过JavaScript获取到`canvas`上下文（通常称为`context`），然后利用该上下文的一些绘图函数来填充背景色。

下面是一个简单的示例，展示如何通过JavaScript设置`canvas`的背景颜色：

// 获取canvas元素及其上下文
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// 设置背景颜色
ctx.fillStyle = '#FFFFFF'; // 这里设置为白色

// 使用fillRect方法绘制整个canvas区域作为背景
ctx.fillRect(0, 0, canvas.width, canvas.height);

在这个例子中：

1. `getElementById`用于获取指定id的`canvas`元素。
2. `getContext('2d')`返回用于在canvas上绘制2D图像的对象。
3. `fillStyle`属性用于设定将要使用的填充样式（即颜色）。这里设置为纯白色（#FFFFFF）。
4. `fillRect(x, y, width, height)`用于绘制矩形区域并填满背景色。这里的坐标 `(0, 0, canvas.width, canvas.height)` 确定了整个canvas区域，因此将所有区域都填充上了所选择的颜色。

当然，您可以将 `'#FFFFFF'` 更改为其他颜色代码，例如 `'rgb(255, 0, 0)'`（红色）、`'#FF0000'` （同样为红色）等，来设置您需要的背景颜色。

---