画布尺寸：支持自定义画布尺寸和背景颜色。 (画布尺寸)

使用 HTML5 Canvas 元素，您可以创建可交互的图形和动画。您可以使用 JavaScript 来控制画布的尺寸、背景颜色和其他属性。

画布尺寸

要设置画布的尺寸，请使用

canvas.width

和

canvas.height

属性。这两个属性以像素为单位指定画布的宽度和高度。

<canvas id="myCanvas" width="500" height="300"></canvas>

上面的代码创建一个宽 500 像素、高 300 像素的画布。

背景颜色

要设置画布的背景颜色，请使用

canvas.style.backgroundColor

属性。您可以使用十六进制颜色代码或颜色名称来指定背景颜色。

canvas.style.backgroundColor = "ffffff";  // 白色
canvas.style.backgroundColor = "red";     // 红色

上面的代码将画布的背景颜色设置为白色，然后将其设置为红色。

自定义画布尺寸和背景颜色示例

以下示例展示如何自定义画布尺寸和背景颜色：

<canvas id="myCanvas"></canvas><script>// 获取画布元素var canvas = document.getElementById("myCanvas");// 设置画布尺寸canvas.width = 500;canvas.height = 300;// 设置背景颜色canvas.style.backgroundColor = "ffffff";
</script>

上面的代码创建一个宽 500 像素、高 300 像素，背景颜色为白色的画布。

总结

自定义 HTML5 Canvas 的尺寸和背景颜色非常简单。您可以使用 JavaScript来设置这些属性，从而创建您想要的任何大小和颜色的画布。