HTML Canvas 完整参考

HTML“画布”元素用于通过 JavaScript 绘制图形。 “画布”元素只是图形的容器。必须使用 JavaScript 来实际绘制图形。 Canvas 有多种绘制路径、框、圆、文本和添加图像的方法。

完整参考

1. 颜色、样式和阴影

• HTML | canvas 的 fillStyle 属性
• HTML |画布 strokeStyle 属性
• HTML | canvas shadowColor 属性
• HTML | canvas shadowBlur 属性
• HTML | canvas shadowOffsetX 属性
• HTML | canvas shadowOffsetY 属性
• HTML | canvas createLinearGradient() 方法
• HTML | canvas createPattern() 方法
• HTML |画布 addColorStop() 方法

2.线型

• HTML | canvas lineCap 属性
• HTML | canvas lineJoin 属性
• HTML |画布 lineWidth 属性
• HTML |画布 miterLimit 属性

3. 矩形

• HTML | canvas rect() 方法
• HTML |画布 fillRect() 方法
• HTML |画布 strokeRect() 方法
• HTML | canvas clearRect() 方法

4. 路径

• HTML |画布填充（）方法
• HTML |画布描边() 方法
• HTML |画布 beginPath() 方法
• HTML |画布 moveTo() 方法
• HTML |画布 closePath() 方法
• HTML |画布 lineTo() 方法
• HTML |画布剪辑（）方法
• HTML | canvas quadraticCurveTo() 方法
• HTML |画布 bezierCurveTo() 方法
• HTML | canvas arc() 方法
• HTML |画布 arcTo() 方法
• HTML |画布 isPointInPath() 方法

5. 转型

• HTML |画布比例（）方法
• HTML |画布旋转（）方法
• HTML |画布 translate() 方法
• HTML |画布变换() 方法
• HTML |画布 setTransform() 方法

6.文字

• HTML | canvas font 属性
• HTML | canvas textAlign 属性
• HTML | canvas textBaseline 属性
• HTML |画布 fillText() 方法
• HTML |画布 strokeText() 方法
• HTML |画布 measureText() 方法

7. 像素处理

• HTML | canvas width 属性
• HTML | canvas height 属性
• HTML |画布 createImageData() 方法
• HTML | canvas getImageData() 方法
• HTML |画布 putImageData() 方法

8. 合成与图像绘制

• HTML | canvas globalAlpha 属性
• HTML |画布 drawImage() 方法