以下是一些常见的 Canvas 对象属性和方法：
属性：
1. width 和 height：
- 获取或设置画布的宽度和高度。
2. getContext()：
- 获取绘图上下文，用于执行绘图操作（2D 或 3D）。
方法：
1. 2D 绘图上下文（getContext('2d')）的方法：
- fillRect(x, y, width, height)：绘制填充矩形。
- strokeRect(x, y, width, height)：绘制矩形边框。
- clearRect(x, y, width, height)：清除矩形区域。
- fillText(text, x, y)：绘制填充文本。
- strokeText(text, x, y)：绘制文本边框。
- drawImage(image, x, y)：绘制图像。
- 等等...
2. 3D 绘图上下文（getContext('webgl') 或 getContext('webgl2')）的方法：
- drawArrays(mode, first, count)：绘制三维图形。
- drawElements(mode, count, type, offset)：使用索引绘制三维图形。
- 等等...
示例：
<!DOCTYPE html>
<html>
<head>
<title>Canvas Object Example</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200" style="border:1px solid #000;"></canvas>
<script>
// 获取 Canvas 对象
var myCanvas = document.getElementById("myCanvas");
// 获取 2D 绘图上下文
var ctx = myCanvas.getContext("2d");
// 绘制填充矩形
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 100, 50);
// 绘制文本
ctx.font = "20px Arial";
ctx.fillStyle = "red";
ctx.fillText("Hello, Canvas!", 50, 150);
</script>
</body>
</html>
上述示例演示了如何通过 JavaScript 获取 Canvas 对象，并使用 2D 绘图上下文进行基本的绘图操作。实际应用中，您可以使用 Canvas 来创建动画、图表、图形编辑器等丰富的可视化内容。如果需要进行更复杂的三维绘图，可以使用 WebGL 上下文。
转载请注明出处：http://www.zyzy.cn/article/detail/4385/HTML