慕课网 Canvas 第二课Canvas绘图详解。
总结
颜色、样式和阴影
属性 |
描述 |
值 |
strokeStyle |
笔触的颜色、渐变或模式 |
CSS 颜色,渐变色 |
fillStyle |
填充绘画的颜色、渐变或模式 |
|
shadowColor |
阴影的颜色、渐变或模式 |
CSS 颜色 |
shadowBlur |
阴影的模糊级别 |
有效值,值越大越模糊,0 被忽略 |
shadowOffsetX |
阴影距形状的水平距离 |
|
shadowOffsetY |
阴影距形状的垂直距离 |
|
方法 |
描述 |
值 |
createLinearGradient(\(x_0\), \(y_0\), \(x_1\), \(y_1\)) |
创建线性渐变(用在画布内容上,不指定渐变范围) |
起点\((x_0, y_0)\),终点\((x_1, y_1)\) |
createRadialGradient(\(x_0\), \(y_0\), \(r_0\), \(x_1\), \(y_1\), \(r_1\)) |
创建放射状 / 环形的渐变 |
|
addColorStop(offset, color) |
规定渐变对象的颜色和停止位置 |
offset 范围 0-1 |
createPattern(img/canvas/video, repeat-style) |
在指定的方向上重复指定的元素 |
repetition: repeat / repeat-x / repeat-y / no-repeat |
线条样式
属性 |
描述 |
值 |
lineCap |
线条的结束端点样式 |
butt(Default) / round / square |
lineJoin |
两条线相交时,所创建的拐角类型 |
miter(Default) / bevel / round |
lineWidth |
当前线条的宽度 |
有限值 |
miter |
最大斜切长度 |
|
miterLimit |
斜切的限制比例 |
|
矩形
方法 |
描述 |
参数 |
rect(x, y, width, height) |
创建矩形 |
左上角顶点 (x, y),宽 width,高 height |
strokeRect(x, y, width, height) |
绘制已定义的路径 |
|
fillRect(x, y, width, height) |
绘制“被填充”的矩形 |
|
clearRect(x, y, width, height) |
在给定的矩形内清除指定的像素 |
|
路径
方法 |
描述 |
参数 |
stroke() |
绘制已定义的路径 |
|
fill() |
填充当前绘图(路径) |
|
beginPath() |
起始一条路径,或重置当前路径 |
|
closePath() |
创建从当前回到起始点的路径 |
|
moveTo(x, y) |
使用给定点创建子路径 |
|
lineTo(x, y) |
增加给定的点,用线段连接到前一个 |
|
arc(x, y, radius, startAngle, endAngle[, counterclockwise]) |
创建弧/曲线(用于创建圆形或部分圆) |
圆心,半径,起始/结束角度,可选参数–旋转方向 |
arcTo(\(x_1\), \(y_1\), \(x_2\), \(y_2\), radius) |
创建两切线之间的弧 / 曲线 |
\(A(x_0, y_0)\), \(B(x_1, y_1)\), \(C(x_2, y_2)\),切线 \(AB\), \(BC\) |
clip() |
从原始画布剪切任意形状和尺寸的区域 |
|
quadraticCurveTo(cpx, cpy, x, y) |
二次贝塞尔曲线 |
|
bezierCurveTo() |
三次贝塞尔曲线 |
|
isPointInPath(x, y) |
如果指定的点位于当前路径中,则返回 true,否则返回 false |
|
二维坐标变换
方法 |
描述 |
参数 |
scale(x, y) |
展缩 |
|
rotate(angle) |
旋转 |
|
translate(x, y) |
平移 |
|
transform(a, b, c, d, e, f) |
坐标变换 |
二维变换矩阵 |
setTransform(a, b, c, d, e, f) |
由原始图形经二维变换矩阵变换 |
|
文本
属性 |
描述 |
值 |
font |
文本字体属性 |
CSS 字体样式 |
textAlign |
文本对齐方式 |
start(Default) / end / left / right / center |
textBaseline |
文本基线 |
top / middle / bottom / alphabetic(Default) / ideographic / hanging |
方法 |
描述 |
参数 |
strokeText(text, x, y[, maxWidth]) |
绘制文本边缘线 |
|
fileText(text, x, y[, maxWidth]) |
绘制被填充的文本 |
|
measureText(text) |
文本度量,属性width |
|
图像绘制
方法 |
描述 |
drawImage() |
绘制图像、画布、视频 |
合成
属性 |
描述 |
值 |
globalAlpha |
绘图的当前 alpha 或透明值 |
范围 0-1 |
globalCompositeOperation |
图层叠加 |
source-over(Default) / source-atop / source-in / source-out / destination-over / destination-atop / destination-in / destination-out / lighter / copy / xor |
其他
方法 |
描述 |
参数 |
save() |
保存当前环境状态 |
|
restore() |
返回之前保存过的环境状态 |
|
getContext() |
2D 绘图,参数为 2d |
|
涉及到的知识
CSS 颜色表示法
- 英文。如 “black”
- 十六进制颜色: #RRGGBB。如 “#000000”,缩写 “#000”
- RGB 颜色: rgb(R, G, B), 参数范围 0-255,或百分比。如 “rgb( 0, 0, 0)”
- RGBA 颜色: rgba(R, G, B, A), A 范围 0-1
- HSL 颜色: hsl(H, S, L)
- HSLA 颜色: hsla(H, S, L, A)
- R: Red, G: Green, B: Blue, A: Alpha(透明度)
- H: Hue(色调,色盘度数,范围0-360), S: Saturation(饱和度,百分比值), L: lightness(亮度,百分比值)
- CSS 合法颜色值
CSS 字体样式
- font: font-style font-variant font-weight font-size font-family;
- [<字体风格> || <字体变形> || <字体加粗> ]? <字体大小> [ / <行高> ]? <字体类形>
- css字体样式(Font Style),属性
斜切
贝塞尔曲线
二维变换矩阵
- 计算机图形学
- a:水平缩放 c:垂直倾斜 e:水平位移
- b:水平倾斜 d:垂直缩放 f:垂直位移
- $
\begin{bmatrix}
a & c & e \\
b & d & f \\
0 & 0 & 1
\end{bmatrix}
$
- 变换矩阵
非零环绕原则
效果
- 剪辑区域
clip()
– 探照灯效果
- 非零环绕原则 – 剪纸效果
一些实例
注意函数的组织形式,使用可选参数的技巧。
- 圆角矩形 – 2048 方格
- 五角星
- 弯月
- 星空
- 五角星 + 弯月 + 三次贝塞尔曲线 + 渐变
- 源码
- 演示
- globalCompositeOperation 属性演示
- Canvas绘图之旅 – 运动的小球