HTML5 Canvas

### HTML5 Canvas

HTML5的`<canvas>`元素提供了一个绘图API，允许开发者通过JavaScript在网页上绘制图形。以下是`<canvas>`元素的一些基础知识和如何使用它来绘制图形和动画。

#### Canvas基础

1. **创建Canvas元素**：
   在HTML中，可以通过添加`<canvas>`标签来创建一个画布。
   ```html
   <canvas id="myCanvas" width="200" height="100"></canvas>
   ```
   `width`和`height`属性定义了画布的大小。

2. **获取Canvas上下文**：
   通过JavaScript获取Canvas元素，并获取其绘图上下文（context），通常是`2d`。
   ```javascript
   var canvas = document.getElementById('myCanvas');
   var ctx = canvas.getContext('2d');
   ```

3. **绘制基本形状**：
   使用`ctx`对象的方法绘制基本图形，如矩形、圆形等。
   ```javascript
   // 绘制一个矩形
   ctx.fillStyle = '#FF0000'; // 设置填充颜色为红色
   ctx.fillRect(10, 10, 150, 80); // 填充矩形

// 绘制一个圆
   ctx.beginPath();
   ctx.arc(75, 75, 50, 0, 2 * Math.PI); // 圆心(75, 75)，半径50
   ctx.fill();
   ```

4. **绘制文本**：
   在Canvas上绘制文本。
   ```javascript
   ctx.font = '20px Arial'; // 设置字体大小和类型
   ctx.fillStyle = 'black'; // 设置文本颜色
   ctx.fillText('Hello, Canvas!', 50, 50); // 绘制文本
   ```

5. **绘制图像**：
   将图像绘制到Canvas上。
   ```javascript
   var img = new Image();
   img.onload = function() {
       ctx.drawImage(img, 0, 0); // 绘制图像
   };
   img.src = 'path/to/image.png'; // 图像路径
   ```

#### 绘图和动画

1. **动画基础**：
   动画可以通过在一定时间间隔内连续绘制和清除Canvas来实现。
   ```javascript
   var angle = 0;
   function draw() {
       ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
       ctx.save();
       ctx.translate(100, 100); // 移动坐标原点
       ctx.rotate(angle * Math.PI / 180); // 旋转
       ctx.fillRect(-50, -50, 100, 100); // 绘制旋转的矩形
       ctx.restore();
       angle += 2; // 每次增加2度
       requestAnimationFrame(draw); // 递归调用draw函数
   }
   draw(); // 开始动画
   ```

2. **使用`requestAnimationFrame`**：
   `requestAnimationFrame`是一个浏览器提供的API，用于在浏览器的下一次重绘之前调用指定的函数更新动画。
   ```javascript
   function animate() {
       requestAnimationFrame(animate); // 请求下一次动画帧
       // 动画代码...
   }
   animate(); // 开始动画
   ```

Canvas提供了一个强大的二维绘图环境，而动画则是通过连续的帧绘制实现的。通过JavaScript和Canvas，开发者可以创建复杂的图形、游戏、数据可视化等丰富的Web应用。