HTML5 的 <canvas> 元素用于在网页上绘制图形，特别是2D图形。通过 JavaScript，可以在 <canvas> 上绘制形状、文本、图像等。以下是基本用法示例：

基本用法

1. 定义 <canvas> 元素：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
    您的浏览器不支持 HTML5 canvas 标签。
</canvas>

2. 使用 JavaScript 绘制图形：

<script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0, 0, 150, 75);
</script>

主要方法

• 绘制矩形：

ctx.fillStyle = "#FF0000";
ctx.fillRect(20, 20, 150, 100); // 填充矩形
ctx.strokeRect(20, 20, 150, 100); // 绘制矩形边框
ctx.clearRect(30, 30, 50, 50); // 清除矩形区域

• 绘制路径：

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 50);
ctx.lineTo(200, 200);
ctx.closePath();
ctx.stroke();

• 绘制圆形和弧线：

ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();

• 绘制文本：

ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
ctx.strokeText("Hello World", 10, 100);

示例：绘制复杂图形

<canvas id="complexCanvas" width="300" height="200" style="border:1px solid #000000;"></canvas>
<script>
    var canvas = document.getElementById('complexCanvas');
    var ctx = canvas.getContext('2d');
    
    // 画一个矩形
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(20, 20, 150, 100);

    // 画一个圆
    ctx.beginPath();
    ctx.arc(200, 100, 50, 0, 2 * Math.PI);
    ctx.fillStyle = "#00FF00";
    ctx.fill();

    // 画一些文本
    ctx.font = "20px Arial";
    ctx.fillStyle = "#0000FF";
    ctx.fillText("Canvas示例", 50, 180);
</script>

总结

HTML5 的 <canvas> 元素通过 JavaScript 提供了强大的绘图功能，适用于游戏开发、数据可视化、动画等。熟练掌握基本的绘图方法和技巧，可以大大增强网页的互动性和视觉效果。sssssss