前言
画布（canvas）元素是HTML5的一部分，允许脚本语言（scripting languages）动态渲染位图像。（维基百科）
定义画布
- Canvas内部文本内容只有不支持的浏览器才会渲染
- 不要使用CSS设置宽高，而要使用标签属性设置宽高，否则宽高会拉伸画布，使画布失真
- Canvas的像素化：每当使用Canvas绘制了一个图形，Canvas就会像素化图形，Canvas没有能力从画布上再次更改已经在画布上的内容
- Canvas画布上绘制动画：按照
清屏->更新->渲染的逻辑进行编程
width：指定画布宽度，单位为px且可以省略，缺省值为300
height：指定画布高度，单位为px且可以省略，缺省值为150
1
| <canvas width="" height="">文本内容</canvas>
|
获取上下文对象
2d：2D绘制上下文
3d：3D绘制上下文
1
2
| let canvas = document.querySelector("canvas");
let ctx = canvas.getContext("2d");
|
创建路径起点
闭合路径
移动画笔
绘制路径
设置画笔
设置描边颜色
1
| ctx.fillStyle = "<color>";
|
渐变
线性渐变
<x_start>：开始点x轴坐标
<y_start>：开始点y轴坐标
<x_end>：结束点x轴坐标
<y_end>：结束点y轴坐标
<num>：颜色位置，取值范围为[0,1]
<color>：颜色值字符串
1
2
3
4
5
| let linear = ctx.createLinearGradient(<x_start>, <y_end>, <x_end>, <y_end>);
linear.addColorStop(<num>, "<color>");
linear.addColorStop(<num>, "<color>");
ctx.fillStyle = linear;
|
径像渐变
<x_start>：开始点圆心x轴坐标
<y_start>：开始点圆心y轴坐标
<r_start>：开始圆的半径
<x_end>：结束点圆心x轴坐标
<y_end>：结束点圆心y轴坐标
<r_end>：结束圆的半径
<num>：颜色位置，取值范围为[0,1]
<color>：颜色值字符串
1
2
3
4
5
| let linear = ctx.createRadialGradient(<x_start>, <y_start>, <r_start>, <x_end>, <y_end>, <r_end>);
linear.addColorStop(<num>, "<color>");
linear.addColorStop(<num>, "<color>");
ctx.fillStyle = linear;
|
阴影
<x>：阴影水平方向偏移量，默认值为0，负数向左，正数向右
<y>：阴影垂直方向偏移量，默认值为0，负数向上，正数向下
<num>：模糊效果，默认值为0
<color>：阴影的颜色
1
2
3
4
| ctx.shadowOffsetX = <x>;
ctx.shadowOffsetY = <y>;
ctx.shadowBlur = <num>;
ctx.shadowColor = "<color>";
|
设置填充颜色
1
| ctx.strokeStyle = "<color>";
|
设置线宽
设置虚线
设置虚线比例
<num_1>：设置线的长度
<num_2>：设置空隙距离
1
| ctx.setLineDash([<num_1>, <num_2>]);
|
设置起始偏移量
1
| ctx.lineDashOffset = <num>;
|
设置透明度
<num>：1~0之间的数，1为不透明，0为透明
1
| ctx.globalAlpha = <num>;
|
设置路径末端形状
取值
butt：缺省值，末端以方形结束
round：末端以圆形结束
square：末端以方形结束，但是增加了一个__宽度是线段相同，高度是线段厚度一半__的矩形区域
设置转折形状
取值
miter：缺省值，尖角
round：圆角
bevel：平角
绘制直线
绘制圆弧
<x>：曲线圆心x轴坐标
<y>：曲线圆心y轴坐标
<radius>：圆的半径
<startAngle>：起始位置，如果是数字表示圆的弧度
<endAngle>：结束位置，如果是数字表示圆的弧度
<anticlockwise>：是否是顺时针，true顺时针，false逆时针
1
| ctx.arc(<x>, <y>, <radius>, <startAngle>, <endAngle>, <anticlockwise>);
|
绘制矩形
<x>：矩形左上角x轴坐标
<y>：矩形左上角y轴坐标
<width>：矩形的宽
<height>：矩形的高
1
| ctx.rect(<x>, <y>, <width>, <height>);
|
路径上色
描边
填充
绘制图形
绘制矩形
绘制填充矩形
<x>：矩形左上角x轴坐标
<y>：矩形左上角y轴坐标
<width>：矩形的宽
<height>：矩形的高
1
| ctx.fillRect(<x>, <y>, <width>, <height>);
|
绘制描边矩形
1
| ctx.strokeRect(<x>, <y>, <width>, <height>);
|
清除画布矩形区域
1
| ctx.clearRect(<x>, <y>, <width>, <height>);
|
绘制文本
设置画笔
设置文本字体
<size>：字号，默认为10px
<family>：字体名，默认值为sans-serif
1
| ctx.font = "<size> <family>";
|
设置文本对齐方式
取值
start：缺省值，文字方向为LTR（左到右）时，相当于left；文字方向为RTL（右到左）时，相当于right
end：文字方向为LTR（左到右）时，相当于right；文字方向为RTL（右到左）时，相当于left
left：文本内容基于x轴左对齐
right：文本内容基于x轴右对齐
center：文本内容基于x轴居中
设置基线
取值
alphabetic：缺省值，文本内容英文基线与坐标位置对齐
hanging：文本内容悬挂基线与坐标位置对齐
ideographic：文本内容英文表意基线与坐标位置对齐
top：文本内容顶部与坐标位置对齐
middle：文本内容中间与坐标位置对齐
bottom：文本内容底部与坐标位置对齐
绘制填充文本
1
| ctx.fillText("文本内容", <x>, <y>);
|
绘制图片
获取图片对象
创建图片对象
1
2
| const img = new Image();
img.src = "";
|
从DOM获取img标签
1
| const img = document.querySelector("img");
|
绘制图片
<image>：图片对象
<x>：图片左上角距离画布左上角的x轴坐标
<y>：图片左上角距离画布左上角的y轴坐标
1
| ctx.drawImage(<image>, <x>, <y>);
|
<width>：图片的宽度
<height>：图片的高度
1
| ctx.drawImage(<image>, <x>, <y>, <width>, <height>);
|
<d_x>：裁剪图片起始位置的x轴坐标
<d_y>：裁剪图片起始位置的y轴坐标
<d_width>：裁剪图片的宽度
<d_height>：裁剪图片的高度
1
| ctx.drawImage(<image>, <x>, <y>, <width>, <height>, <d_x>, <d_y>, <d_width>, <d_height>);
|
形变
1
| ctx.transform(<a>, <b>, <c>, <d>, <e>, <f>);
|
平移
<x>：x轴坐标偏移量
<y>：y轴坐标偏移量
1
| ctx.translate(<x>, <y>);
|
旋转
<num>：z轴的旋转弧度
缩放
<x>：x轴缩放倍率
<y>：y轴缩放倍率
画布状态
将当前画布状态保存为快照
恢复到最近一次的快照
蒙版
1
| ctx.globalCompositeOperation = "";
|
取值
destination-in：只显示旧图形∈新图形
destination-over：将新图形绘制在旧图形的底部
destination-out：只显示旧图形∉新图形
destination-atop：新图形绘制在旧图形底部的同时，只显示新图形的部分
source-in：只显示新图形∩旧图形
source-over：缺省值，将新图形绘制在旧图形的顶部
source-out：只显示新图形∉旧图形
source-atop：只显示非新图形∉旧图形
完成