canvas基础学习

---

描述

• <canvas>标签用于绘制图像(通过脚本，通常是JavaScript)
• 不过，<canvas>元素本身并没有绘制能力，仅仅是图形的容器，必须使用脚本来完成实际的绘图任务
• getContext()方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性
• getContext("2d")对象是内置的html5对象，可用于其属性和方法在画布上绘制文本、线条、矩形、圆形等

canvas三要素

id: 作为唯一的标识
width：画布内容宽度的像素大小
height：画布内容高度的像素大小

注意：canvas仅仅是一个画布标签，要绘制内容必须用js绘制

canvas的height和width

<canvas>的width和height属性作为标签属性代表的是画布的分辨率，如果写在样式里则代表的是画布的大小

颜色、样式和阴影

属性	描述
fillStyle	设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle	设置或返回用于笔触的颜色、渐变或模式
shadowColor	设置或返回用于阴影的颜色
shadowBlur	设置或返回用于阴影的模糊级别
shadowOffsetX	设置或返回阴影与形状的水平距离
shadowOffsetY	设置或返回阴影与形状的垂直距离

绘制路径

方法	描述
fill()	填充当前绘图(路径)
stroke()	绘制已经定义了的路径
beginPath()	起始一条路径，或重当前路径
moveTo()	把路径移到画布中的指定点
closePath()	创建从当前点回到起始点的路径
lineTo()	添加一个新点，在画布中创建从该点到最后指定点的线条

线条样式：

属性	描述
lineCap	设置或返回线条的结束端点样式
lineJoin	设置或返回两条线相交时，所创建的拐角类型
lineWidth	设置或返回当前的线条宽度
miterLimit	设置或返回最大斜接长度

绘制圆形

绘制文本

有点像弹幕效果：
注意要清空画布，不然会重复画很多遍叠在一起

绘制图像

绘制视频

转换

移动

旋转

缩放

我们可以用ctx.save()保留画笔的状态，ctx.restore()恢复画笔的状态
例如先ctx.save();，再ctx.scale(2,1);改变坐标轴，如果要恢复可以用ctx.scale(0.5,1);也可以用ctx.restore();

restore()是一层一层往上找的，如果save()了多次，也要restore()多次才能恢复到原来的状态

注意：变动的都是坐标轴，所以在改变坐标轴之前绘制的图形是不会变换的

合成

globalCompositeOperation属性：用于设置或返回如何将一个源图像绘制到目标图像上
源图像：您打算放置到画布上的绘图
目标图像：您已经放置到画布上的绘图

属性值：

值	描述
source-over	在目标图像上显示源图像，默认值
source-atop	在目标图像顶部显示源图像，源图像位于目标图像之外的部分是不可见的
source-in	在目标图像中显示源图像，只有目标图像之内的源图像部分会显示，目标图像是透明的
source-out	在目标图像中显示源图像，只有目标图像之外的源图像部分会显示，目标图像是透明的
destination-over	在源图像中显示目标图像
destination-atop	在源图像中显示目标图像，目标图像位于源图像之外的部分是不可见的
destination-in	在源图像中显示目标图像，只有源图像之内的目标图像部分会显示，源图像是透明的
destination-out	在源图像中显示目标图像，只有源图像之外的目标图像部分会显示，源图像是透明的
lighter	目标图像和源图像叠加的部分是透明的，其他部分正常显示
copy	显示源图像，忽略目标图像

这时的globalCompositeOperation属性为默认值：source-over

修改一下globalCompositeOperation属性的值：

ctx.globalCompositeOperation = "source-atop";

目标图像之外的图像不可见

ctx.globalCompositeOperation = "source-in";

和source-atop效果有点像，就是目标图像变透明了

ctx.globalCompositeOperation = "source-out";

只显示目标图像以外的源图像部分

ctx.globalCompositeOperation = "destination-over";

和source-over效果相反，在源图像上显示目标图像

ctx.globalCompositeOperation = "lighter";

源图像和目标图像重叠的部分不可见

ctx.globalCompositeOperation = "copy";

源图像不可见