认知canvas知识要点

canvas是个双标签，canvas标签之间的内容不被解析（浏览器识别canvas标签）

JS要找到标签，需创建上下文，后续的绘制图像，都是通过上下文实现。
“上下文”：通过canvas创建的对象，这个对象具备绘图能力， 可以理解为“画笔”。

JS要找到标签，需创建上下文，后续的绘制图像，都是通过上下文实现。
“上下文”：可以绘制：线条，矩形，圆，文字，绘制图片，绘制曲线。

canvas绘制图形图像：
canvas标签的宽高要使用属性来设置，写在外部样式标签canvas中绘制的图像会变形。

1.创建上下文

2.以使用上下文对象的属性和方法，cnt.属性 cnt.方法
绘制矩形：canvas绘制的图形图像都是按坐标来摆放位置，默认以px单位计算宽高。
坐标：X轴 向右为正方向；Y轴向下是正方向。坐标轴的左上角是原点（0,0），
绘制矩形： cnt.fillRect(10,10,50,50);
10,10表示绘制左上角为起始坐标。50,50表示矩形的宽和高。
右下角坐标60,60

绘制矩形的其他方法：
cnt.fillRect(x,y,宽,高);绘制填充的矩形
cnt.strokeRect(x,y,宽,高);绘制默认描边的矩形
cnt.rect(x,y,宽,高);绘制无效果的矩形。（加效果才能看见）
cnt.clearRect(x,y,宽,高);清除矩形。

设置填充和描边的样式
填充的样式：cxt.fillStyle = 'red'; #000000; rgba(); 渐变(gradient)包括线性渐变和径向渐变;
描边的样式:cxt.strokeStyle = 'blue';
填充的要求：图形或图像是闭合的封闭空间。
填充：fill是填充你给的意思，所以在canvans中，出现fill或fillXXX都是填充样式。
填充：stroke是描边你给的意思，所以在canvans中，出现stroke或strokeXXX都是描边样式
默认的矩形是没有效果和看不到的，想让矩形显示出来，需要调用填充或描边方法。
canvas图形和图像不能用用F12检查，要填充样式看到效果。


样式：
填充样式：fillStyle 可以写的值: 英文(red) 十六进制(#000000) rgb(255,0,0) rgba(255,0,0,0.3) 渐变(gradient)
描边样式：strokeStyle 可以写的值: 英文(red) 十六进制(#000000) rgb(255,0,0) rgba(255,0,0,0.3) 渐变(gradient)
设置的fillStyle和strokeStyle都是全局的，设置后后续使用时都会受到影响。
Function 构造函数(){
This.fillStyle = xxx;
}
构造函数.prototype.fillRect= function(){
This.rect(10,10,50,100);
This.Fill()
阴影：
阴影能设置阴影颜色、模糊半径、偏移量(x,y)
shadowColor = 颜色值，可以使用 英文(red) 十六进制颜色值(#000000) rgb() rgba()
shadowBlur = 20 模糊半径

绘制线条：
起始位置：moveTo(x,y);
终止点：lineTo(x,y);
绘制线条时使用描边：stroke(); 不封闭的图形用stroke
特点：一个moveTo() 可以有多个lineTo(); 后面的lineTo()会以前面的lineTo()为起点。后一条以前一条的终点为起点。
如果不想要这个特点，需要重新写起点：moveTo();

线条常用属性：
线条宽度：lineWidth = 整数
设置的线条宽度默认会影响所有的线条，如果不想影响以前绘制的线条，这时需要重启路径。重启路径的作用是把后续绘制的图形图像和beginPath()之前的断开。

但是线条宽度也是一个全局的属性，设置后不会因为beginPath()重启路径就恢复到默认值。

绘制圆：
Arc(x轴坐标,y轴坐标,r,起始角度,终止角度,顺或逆)
角度：Math.PI = 180°

贝塞尔曲线：
使用时需要自己定义线段的起始点cnt.moveTo()
二次贝塞尔曲线：quadraticCurveTo(cpx,cpy,x,y)
Cpx,cpy 是作用点。
X,y 线段终止点


三次贝塞尔曲线：bezierCurveTo(cpx1,cpy1,cpx2,cpy2,x,y)
Cpx1,cpy1,cpx2,cpy2 这是两个作用点
X,y 线段的终点

文字：
填充形式的文字： fillText('要写入的文字',x,y,MaxWidth);
描边形式的文字： strokeText('要写入的文字',x,y,MaxWidth);
设置文字：
font 可以设置文字的大小、粗细、字体(css用法一样)
textAlign 设置对齐方法
实心字：
cnt.font="24px 楷体";
cnt.fillStyle='blue';
cnt.fillText('贝塞尔曲线',50,100);
空心字：也叫描边型文字
cnt.strokeStyle = 'orange';
cnt.font="30px 楷体";
cnt.strokeText('空心字',50,150);
图像绘制：
向canvas中添加图片
Cnt.drawImage(src,sx,sy,sw,sh,x,y,w,h);
Src: 加载图片对象
Sx,sy,sw,sh:这四个参数是可选的，图片裁切(定义裁切的起始坐标和宽高)
X,y,w,h:这四个参数前两个必需，后两个可选，定义图片在canvas中展示的位置和宽高


用法：
图片不裁切,显示大小也不限制：cnt.drawImage(src,x,y);
图片不裁切,显示大小限制：cnt.drawImage(src,x,y,w,h);
图片裁切,不管是否限制显示大小:cnt.drawImage(src,sx,sy,sw,sh,x,y,w,h);
放大缩小： scale(x轴放大缩小倍数，y轴放大缩小倍数);
scale()缩放
scale(参数)
参数 > 1 放大
参数 < 1 缩小
rotate() 旋转
rotate(Math.PI);
以顺时针进行旋转,旋转的是画布的坐标系。
translate() 移动
translate(x,y)
把(0,0)这个坐标移动到指定的x,y位置
转换会影响整个画布的大小，是全局的属性，会影响后续的所有图形图像
这三个方法都是改变画布整体的状态

转换之前先使用save()方法；保存当前状态scale(1,1) 用于缩放，旋转，移动
转换之后用restore()方法;还原状态scale(1,1) 用于缩放，旋转，移动
globalAlpha 设置透明度 取值范围 0-1 全局的属性，会影响后续的所有图像的透明度。
globalCompositeOperation 设置图层叠加时的显示样式
图片大小，加载速度，加载顺序，透明度

offsetX ofsetY相对于父元素左上角的坐标。
canvas中的事件：