HTML5 Canvas Cheat Sheet.pdf

### HTML5 Canvas Cheat Sheet知识点详解####一、HTML5 Canvas概述- **HTML5 Canvas**是一种用于在网页上绘制图形的方法。它通过``标签定义一个区域，然后通过JavaScript来控制这个区域内所绘制的内容。 - **Canvas的使用**：与SVG（可缩放矢量图形）不同，Canvas不提供任何内置的图形渲染能力，而是通过一系列API来绘制图形。 ####二、Canvas元素属性及方法##### 1.属性- **`width`**和**`height`**：定义``元素的宽度和高度，默认分别为300px和150px。 ##### 2.方法- **`toDataURL()`**：将canvas内容导出为一个包含图像数据的URL。可选参数包括指定的图像格式和质量。 - **参数**： - `[Optional] string type`：输出图像的MIME类型（例如"image/png"或"image/jpeg"）。 - `[Variadic] any args`：额外的参数，如JPEG图像的质量。 - **`getContext()`**：获取一个渲染上下文对象，用于执行绘图命令。 - **参数**： - `string contextId`：上下文类型，通常为"2d"。 ####三、2D渲染上下文- **2D渲染上下文**是用于绘制基本形状、文本和图像的主要接口。 ##### 1.属性- **`canvas`**：表示``元素的对象引用，只读属性。 ##### 2.方法- **`save()`**：保存当前绘图状态到栈。 - **`restore()`**：从栈恢复最近被保存的绘图状态。 ##### 3.变换方法- **`scale(x, y)`**：缩放绘图上下文。 - **`rotate(angle)`**：围绕原点旋转绘图上下文。 - **`translate(x, y)`**：平移绘图上下文。 - **`transform(m11, m12, m21, m22, dx, dy)`**：应用一个变换矩阵来改变绘图上下文的位置、方向和大小。 - **`setTransform(m11, m12, m21, m22, dx, dy)`**：重置所有现有的变换，并将新的变换应用于绘图上下文。 ##### 4.图像绘制方法- **`drawImage(image, dx, dy, [Optional] dw, dh)`**：绘制图像。 - **参数**： - `image`：可以是`HTMLImageElement`, `HTMLCanvasElement`或`HTMLVideoElement`类型。 - `dx, dy`：目标矩形的左上角坐标。 - `[Optional] dw, dh`：目标矩形的宽度和高度。 - **`drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)`**：从源矩形复制图像到目标矩形。 - **参数**： - `sx, sy, sw, sh`：源矩形的左上角坐标、宽度和高度。 - `dx, dy, dw, dh`：目标矩形的左上角坐标、宽度和高度。 ##### 5.组合方法- **`globalAlpha`**：设置全局透明度，默认值为1.0（不透明）。 - **`globalCompositeOperation`**：设置如何将源图形组合到目标图形上，默认为"source-over"。 - **支持的操作**： - `source-over` - `source-in` - `source-out` - `source-atop` - `destination-over` - `destination-in` - `destination-out` - `destination-atop` - `lighter` - `copy` - `xor` ####四、线条样式##### 1.属性- **`lineWidth`**：设置线宽，默认值为1.0。 - **`lineCap`**：设置线端点的样式，默认为"butt"。 - **支持的值**： - `butt` - `round` - `square` - **`lineJoin`**：设置两条线交汇处的拐角样式，默认为"miter"。 - **支持的值**： - `round` - `bevel` - `miter` - **`miterLimit`**：设置miter类型的线连接的最大长度，默认值为10。 ####五、颜色、样式和阴影##### 1.属性- **`strokeStyle`**和**`fillStyle`**：分别设置描边颜色和填充颜色，默认值均为黑色。 - **`shadowOffsetX`**和**`shadowOffsetY`**：设置阴影的水平和垂直偏移，默认值为0.0。 - **`shadowBlur`**：设置阴影模糊程度，默认值为0.0。 - **`shadowColor`**：设置阴影颜色，默认为透明黑色。 ##### 2.方法- **`createLinearGradient(x0, y0, x1, y1)`**：创建一个线性渐变对象。 - **`createRadialGradient(x0, y0, r0, x1, y1, r1)`**：创建一个径向渐变对象。 - **`createPattern(image, repetition)`**：创建一个图案对象，用于填充形状。 - **参数**： - `image`：可以是`HTMLImageElement`, `HTMLCanvasElement`或`HTMLVideoElement`类型。 - `repetition`：重复模式，支持的值包括"repeat" (默认)、"repeat-x"、"repeat-y"和"no-repeat"。以上就是HTML5 Canvas Cheat Sheet的主要知识点，通过这些API和属性，开发者可以轻松地在网页上绘制出复杂的图形和动画效果。