HTML5 中的 <canvas> 元素是一个用于绘制图形的容器。它提供了通过 JavaScript 脚本来绘制图形、图像以及实现动画的能力。以下是 <canvas> 的基本用法：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Canvas</title>
</head>
<body>

<!-- 创建一个 canvas 元素 -->
<canvas id="myCanvas" width="400" height="200" style="border:1px solid #000;"></canvas>

<script>
    // 获取 canvas 元素的上下文对象
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    // 在画布上绘制矩形
    context.fillStyle = "#FF0000";  // 设置填充颜色为红色
    context.fillRect(10, 10, 100, 50);  // 绘制矩形

    // 在画布上绘制文本
    context.fillStyle = "#000000";  // 设置填充颜色为黑色
    context.font = "20px Arial";  // 设置字体大小和样式
    context.fillText("Hello, Canvas!", 150, 50);  // 绘制文本

    // 绘制线条
    context.strokeStyle = "#0000FF";  // 设置线条颜色为蓝色
    context.lineWidth = 2;  // 设置线条宽度
    context.beginPath();
    context.moveTo(10, 100);  // 设置起始点
    context.lineTo(150, 100);  // 设置终点
    context.stroke();  // 绘制线条
</script>

</body>
</html>

在上面的示例中：

  •  <canvas> 元素的 width 和 height 属性定义了画布的宽度和高度。

  •  通过 JavaScript 获取了 canvas 上下文对象，可以通过这个对象进行绘图。

  •  使用 fillRect 绘制了一个红色矩形。

  •  使用 fillText 绘制了一段文本。

  •  使用 beginPath、moveTo 和 lineTo 绘制了一条蓝色线条。


这只是一个简单的例子，<canvas> 元素还支持更多的绘图功能，包括绘制路径、圆形、图像等。通过结合 JavaScript，您可以实现各种复杂的图形和动画效果。


转载请注明出处：http://www.zyzy.cn/article/detail/12503/HTML5