Manwal ng Canvas ng HTML
Manwal ng Canvas ng HTML
HTML <canvas> tag is used to dynamically draw graphics through scripts (usually JavaScript).
For more information about <canvas>, please read our HTML Canvas tutorial.
Color, style, and shadow
| 属性 |
描述 |
| fillStyle |
Set or return the color, gradient, or pattern for the fill |
| strokeStyle |
Set or return the color, gradient, or pattern for the stroke |
| shadowColor |
Set or return the color of the shadow |
| shadowBlur |
Set or return the blur level of the shadow |
| shadowOffsetX |
Set or return the horizontal distance of the shadow from the shape |
| shadowOffsetY |
Set or return the vertical distance of the shadow from the shape |
Line style
| 属性 |
描述 |
| lineCap |
Set or return the style of the line's endpoint |
| lineJoin |
Set or return the type of corner created when two lines intersect |
| lineWidth |
Set or return the current line width |
| miterLimit |
Set or return the maximum miter length |
Path
| 方法 |
描述 |
| fill() |
Fill the current drawing (path) |
| stroke() |
Draw the defined path |
| beginPath() |
Start a new path or reset the current path |
| moveTo() |
Move the path to a specified point on the canvas without creating a line |
| closePath() |
Create a path that goes back to the starting point from the current point |
| lineTo() |
Add a new point and create a line from this point to the last specified point on the canvas |
| clip() |
Cut any shape and size area from the original canvas |
| quadraticCurveTo() |
创建二次贝塞尔曲线 |
| bezierCurveTo() |
创建三次方贝塞尔曲线 |
| arc() |
创建弧/曲线（用于创建圆形或部分圆） |
| arcTo() |
创建两切线之间的弧/曲线 |
| isPointInPath() |
如果指定的点位于当前路径中，则返回 true，否则返回 false |
像素操作
| 属性 |
描述 |
| width |
返回 ImageData 对象的宽度 |
| height |
返回 ImageData 对象的高度 |
| data |
返回一个对象，其包含指定的 ImageData 对象的图像数据 |
其他
| 方法 |
描述 |
| save() |
保存当前环境的状态 |
| restore() |
返回之前保存过的路径状态和属性 |
| createEvent() |
|
| getContext() |
|
| toDataURL() |
|
