canvas2d 绘画

Canvas 2D API 是 HTML5 中提供的一种在网页上绘制图形和矢量图像的技术，它是基于 HTML5 的 `<canvas>` 元素，允许开发者直接在浏览器中进行图形渲染。Canvas 2D 主要用于实时绘图、动画、数据可视化等场景。

下面是 Canvas 2D 绘画的一些基本概念：

1. **Canvas 元素**：这是在 HTML 中创建的标签，用来作为绘图表面。你可以设置其 width 和 height 属性来定义画布的大小。

2. **Context对象**：每个 `<canvas>` 都有一个 `2D` 对象（`canvas.getContext('2d')`），它是绘图的主要接口，提供了丰富的绘图方法如 `fillRect()`、`strokeRect()`、`drawImage()` 等。

3. **绘图方法**：Canvas 2D 提供了一系列用于绘制直线、矩形、圆形、弧线、文本、图像以及渐变和阴影等的函数。比如 `moveTo()`, `lineTo()`, `arc()`, `fillText()` 等。

4. **颜色和样式**：可以通过设置 `strokeStyle`、`fillStyle`、`lineWidth` 和 `lineCap` 等属性来控制线条和填充的颜色、宽度和形状。

5. **图像处理**：Canvas 2D 可以处理图片，包括加载本地图片 (`image.src`), 创建 Image 对象 (`new Image()`) 或者跨域请求远程图片。

6. **事件处理**：虽然 Canvas 本身没有事件绑定机制，但可以利用 HTML5 的事件模型处理鼠标点击、移动等操作。