js canvas添加背景颜色

要在JavaScript的canvas上添加背景颜色，你可以使用canvas的上下文（context）对象的`fillStyle`属性来设置背景颜色，然后使用`fillRect`方法来绘制一个填充矩形，以覆盖整个canvas。

首先，你需要创建一个canvas元素，并获取到它的上下文对象。你可以按照以下步骤进行操作：

1. 使用 `document.createElement()` 方法创建一个canvas元素。
2. 通过调用 `canvas.getContext('2d')` 获取到canvas的上下文对象。

接下来，你可以使用上下文对象的方法来设置背景颜色并绘制矩形：

1. 使用 `context.fillStyle` 属性设置背景颜色，可以是颜色值或者颜色名称。例如，`context.fillStyle = 'red';` 表示背景色为红色。
2. 使用 `context.fillRect(x, y, width, height)` 方法绘制填充矩形，其中 `(x, y)` 是矩形的左上角坐标，`width` 和 `height` 是矩形的宽度和高度。你可以将 `x` 和 `y` 设置为0，`width` 和 `height` 设置为canvas的宽度和高度，以覆盖整个canvas。

下面是一个示例代码，展示了如何在canvas上添加背景颜色：

let canvas = document.createElement("canvas");
let context = canvas.getContext('2d');

// 设置背景颜色
context.fillStyle = 'red';

// 绘制填充矩形
context.fillRect(0, 0, canvas.width, canvas.height);

这样就在canvas上添加了红色的背景颜色。你可以根据需要自行更改背景颜色和canvas的宽度和高度。