Canvas入门学习笔记

1. 什么是Canvas？

1.canvas标签是HTML5中的一个标签，是一个绘制面板(画布)
2.需要结合js代码进行操作，canvas定义为页面的一个可以绘制图像的区域
3.canvas默认像素是300*150
注意：如果浏览器不支持canvas标签，标签中的内容会显示出来

2. Canvas中的属性和方法

2.1 路径

方法	描述
moveTo()	把路径移动到画布中的指定点，不创建线条
lineTo()	添加一个新点，然后在画布中创建从该点到最后指定点的线条
stroke()	绘制已定义的路径
beginPath()	起始一条路径，或重置当前路径
closePath()	创建从当前点回到起始点的路径
arc()	创建弧/曲线（用于创建圆形或部分圆）
setLineDash	设置虚线(参数是一个数组)
fill()	填充当前绘图(路径)
lineDashOffset	设置虚线偏移量

2.2 线条样式

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

2.3 矩形

方法	描述
rect()	创建矩形
fillRect()	绘制“被填充”的矩形
strokeRect()	绘制矩形（无填充）
clearRect()	在给定的矩形内清除指定的像素

2.4 颜色、样式和阴影

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

方法	描述
createLinearGradient()	创建线性渐变（用在画布内容上）
addColorStop()	规定渐变对象中的颜色和停止位置

注意：

addColorStop(stop,color);
stop: 介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
color: 在结束位置显示的 CSS 颜色值

2.5 合成

属性	方法
globalCompositeOperation	设置或返回新图像如何绘制到已有的图像上

注意：globalCompositeOperation所对应的值：

值	描述
source-over	默认。在目标图像上显示源图像。
source-atop	在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
source-in	在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。
source-out	在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。
destination-over	在源图像上方显示目标图像。
destination-atop	在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。
destination-in	在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。
destination-out	在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
lighter	显示源图像 + 目标图像。
copy	显示源图像。忽略目标图像。
source-over	使用异或操作对源图像与目标图像进行组合。