<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Canvas 示例</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200" style="border:1px solid #000;"></canvas>
<script>
// 获取 canvas 元素
var canvas = document.getElementById("myCanvas");
// 获取 2D 渲染上下文
var ctx = canvas.getContext("2d");
// 绘制矩形
ctx.fillStyle = "#FF0000";
ctx.fillRect(50, 50, 100, 80);
// 绘制文本
ctx.font = "20px Arial";
ctx.fillStyle = "#000000";
ctx.fillText("Hello, Canvas!", 50, 180);
</script>
</body>
</html>
在这个示例中，我们创建了一个宽度为 400 像素、高度为 200 像素的 <canvas> 元素，并获取了其 2D 渲染上下文。然后，使用 fillRect 方法绘制了一个红色的矩形，以及使用 fillText 方法在 canvas 上绘制了文本。
基本的 Canvas 操作包括：
1. 绘制形状：
- fillRect(x, y, width, height)：绘制填充的矩形。
- strokeRect(x, y, width, height)：绘制矩形边框。
- clearRect(x, y, width, height)：清除矩形区域内的内容。
2. 绘制路径：
- beginPath()：开始一条路径。
- moveTo(x, y)：将笔触移动到指定的坐标。
- lineTo(x, y)：添加一条直线，从当前位置到指定的坐标。
- stroke()：绘制路径的边框。
- fill()：填充路径。
3. 绘制文本：
- fillText(text, x, y)：绘制填充的文本。
- strokeText(text, x, y)：绘制文本的边框。
4. 绘制图像：
- drawImage(image, x, y)：绘制图像。
5. 状态保存和恢复：
- save()：保存当前绘图状态。
- restore()：恢复之前保存的绘图状态。
Canvas 是一个强大的工具，可以用于创建复杂的图形和动画。它被广泛用于游戏开发、数据可视化、图像处理等领域。如果你对 Canvas 感兴趣，可以深入学习其更高级的用法和技术。
转载请注明出处：http://www.zyzy.cn/article/detail/12425/HTML