canvas基础

以下内容是我自己边学边整理的，有不完整或者有问题的地方欢迎评论~

创建canvas画布

1. 进来的都知道的HTML标签 <canvas></canvas>
   canvas画布默认有300*150的大小，建议使用canvas属性(width,height)修改canvas的大小，如果用style可能会因为比例问题导致画布被拉伸变形。

2. 渲染

var canvas = document.querySelect('canvas');
var context = canvas.getContext('2d');

创建了一个2D画布，在这之后我们就可以在上边画画了

************************** 以下内容都以写了上边的代码为基础 **************************

---

画矩形

画矩形常用的方法有两种，一种是画空心矩形（只有边框）strokeRect()，一种是画实心矩形（只有填充）fillRect()

空心矩形（只有边框）strokeRect()

设置项：

• context.lineWidth = 5 设置边框宽度
• context.strokeStyle = "#aaaaaa" 设置边框颜色（或者渐变）

渲染：

• context.strokeRect(left,top,width,height); context.strokeRect(距离左边的距离，距离右边的距离，宽度，高度)

注意：所有lineWidth所设置的空心矩形的边框大小都是从线段中心往两边扩散的，比如矩形宽度设置为100，边框宽度设置为50，实际上得到的矩形宽度为150，content宽度为50

context.strokeStyle = "#cccccc";
context.lineWidth = 5;
context.strokeRect(10,10,100,100);

实心矩形（只有填充）fillRect()

设置项：

• context.fillStyle = "#aaaaaa" 设置矩形颜色（或者渐变）

渲染：

• context.fillRect(left,top,width,height); context.fillRect(距离左边的距离，距离右边的距离，宽度，高度)

context.fillStyle = "#aaaaaa"
context.fillRect(10,20,50,100);

也可以用 rect(left,top,width,height)画矩形后再用fill()或stroke()填充

context.rect(0,0,300,300)
context.fill()

画文本

文本和矩形相似，也有空心strokeText()和实心fillText()两种区分,不过用法类似，就不拆开写了

设置项：

• context.textAlign = "left" 设置文字的左右对齐方式（默认left）
• context.textBaseline = 'middle' 设置文字的上下对齐方式（默认middle）
• context.font = "context.font="20px Arial";" 设置文字的样式、大小、字体等内容（和css font用法相同）
• context.fillStyle = "#aaaaaa" 实心文字 设置颜色
• context.strokeStyle = "#aaaaaa" 空心文字 设置颜色
• context.lineWidth = 5; 空心文字 设置边框宽度

渲染：

• 实心 context.fillText(text,left,top,maxWidth); context.fillRect(文字内容，距离左边的距离，距离右边的距离，文字最大宽度(可选，如果超出文字最大宽度文字会被压扁))
• 空心 context.strokeText(text,left,top,maxWidth) context.strokeText(文字内容，距离左边的距离，距离右边的距离，文字最大宽度(可选，如果超出文字最大宽度文字会被压扁))

画线（圆、圆弧）

设置项：

• context.lineWidth = 5 设置线段宽度
• context.strokeStyle = "#aaaaaa" 设置线段颜色（或者渐变）
• context.fillStyle = "#aaaaaa" 设置填充颜色（或者渐变）

画线段前，用context.beginPath()告诉浏览器，我要开始画/重新画线段啦~
下一步就是开始下笔画context.moveTo(left,top)

然后移动笔，开始画，这里移动笔的方法有很多

• lineTo(left,top) 画直线
• quadraticCurveTo('贝塞尔点left','贝塞尔点top',left,top) 画二次贝塞尔曲线(一个贝塞尔点的贝塞尔曲线)
• bezierCurveTo('贝塞尔点1left','贝塞尔点1top','贝塞尔点2left','贝塞尔点2top',left,top) 画三次贝塞尔曲线(两个贝塞尔点的贝塞尔曲线(起始点和结束点都有贝塞尔曲线控制))
• arcTo('拐点位置left'，'拐点位置top','终点left','终点top','圆角大小') 画圆弧 这种画圆弧的方法可以想象成画一个角，然后在对这个角进行圆角处理，上一个点到拐点位置是角的一条边，拐点位置到终点位置是角的另一条边，然后再对这个角从拐点位置开始圆角
• arc('圆心left','圆心top','半径','起始点','结束点'，'true/false【逆/顺时针 可选填】') 画圆弧（起始点和结束点都需要输入度数，度数可以用Math.PI为基础(180度)来加减乘除）

注意：不一定必须用moveTo来开始一条新的线段，在还没有下笔（开始线段）的情况下，任意可以形成线的方法都可以画出来线哦,比如直接用arc(50,50,50,0,Math.IP * 2)，或者lineTo(0,0); lineTo(50,50);也可以组成一条线段

图片

在canvas中放入图片drawImage(left(可选), top(可选), width(可选), height(可选), 切片left(可选), 切片top(可选), 切片width(可选), 切片height(可选))
然后可以用canvas.toDataURL("image/png");转换成base64格式的哦~

样式修改汇总

• context.lineWidth = 5 设置线段宽度
• context.strokeStyle = "#aaaaaa" 设置线段颜色（或者渐变）
• context.fillStyle = "#aaaaaa" 设置填充颜色（或者渐变）
• context.textAlign = "left" 设置文字的左右对齐方式（默认left）
• context.textBaseline = 'middle' 设置文字的上下对齐方式（默认middle）
• context.font = "context.font="20px Arial";" 设置文字的样式、大小、字体等内容（和css font用法相同）
• context.lineCap = "butt" 设置线段首位样式————butt 默认 round 圆形结束 square 和默认样式一样，不过比默认长出线段宽度一半的大小
• context.lineJoin = "miter" 设置线段链接处样式————miter默认 round 圆角拐点 bevel 直角拐点
• context.setLineDash([每个小虚线点长度, 每个小虚线点空隙]); 画虚线（注意要传个数组，注意这是全局设置）

变形（transform）

变形可以理解成CSS3中transform中的功能

• context.translate(left,top) 移动位置
• context.rotate(度) 旋转 Math.PI 为180度
• context.scale(x,y) 缩放，1为基础比例

并集、交集等

• context.globalCompositeOperation = 两个图形相交后的操作
  实际使用时

context.fillStyle = '#ff0000' // 为了明显点增加了颜色
context.fillRect(10,10,50,50)
context.globalCompositeOperation = "source-in"; // 改编为交集
context.fillStyle = '#ffff00' // 为了明显点增加了颜色
context.fillRect(40,40,50,50)
context.globalCompositeOperation = "source-over"; // 因为此操作是全局操作，所以在改变后要改变回来（推荐用save，后面再说）

globalCompositeOperation的可选属性（老图形为a，新图形为b）

• source-over 默认 （a和b都显示）
• source-in 只显示重叠部分 （显示a和b重叠部分，显示的是b）
• source-out 显示没有和老图形重叠的那部分新图形（显示b，但要减去a的部分）
• source-atop 显示老图形、和老图形重叠的新图形（显示a，如果b在a之中，则显示在a之中的那部分b）
• destination-over 显示新老图形，但老图形在上，新图形在下(a和b都显示，但a的层级比b高)
• destination-in 只显示重叠部分，但显示的是老图形 （显示a和b重叠部分，显示的是b）
• destination-out 显示没有和老图形重叠的那部分新图形，但显示的是老图形（显示a，但要减去b的部分）
• destination-atop 显示新图形、和新图形重叠的老图形（显示b，如果a在b之中，则显示在b之中的那部分a）
• lighter 新老图形都显示，但重叠部分颜色会叠加变浅
• darken 新老图形都显示，但重叠部分颜色会叠加变深
• xor 重叠部分透明
• copy 只显示新图形（删除其他的）

裁剪

• context.clip() 以之前的路径创建一个裁剪区域，让之后画的内容只能出现在裁剪区域内

举个栗子：

    context.rect(40,40,100,10) // 画一个矩形
    context.clip() // 进行裁剪后，之后的内容只能出现在40，40，100，10的方框内
    context.fillRect(0,0,160,60)

保存/恢复(很重要)

• context.save() 保存状态
• context.restore() 恢复状态

在调用裁切或者并集交集后，没有办法退回去怎么办，我们可以用save解决这个问题
save是用来保存状态的，举几个状态的例子，如颜色、线条粗细、文字样式、裁切状态等等
我们可以无数次调用save，保存多个状态，状态会存在一个我们看不见的数组中，然后每次调用restore后都会pop出一个状态

举个栗子：

context.save() // 保存状态一个初始状态
context.fillStyle = '#ff0000' // 设置红色
context.save() // 保存状态（保存了红色）
context.fillRect(0,0,10,50) // 画一个红色的矩形
context.fillStyle = '#ffff00' // 设置黄色
context.save() // 再保存一个状态（保存了黄色）
context.fillStyle = '#00ffff'  // 设置蓝色
context.fillRect(10,0,10,60) // 画一个蓝色的矩形
context.restore() // 恢复状态
context.fillRect(20,0,10,70) // 画一个恢复状态后黄色的矩形

渐变

渐变分为线性渐变createLinearGradient()和径向渐变createRadialGradient()，渐变的写法是先用这两个中的一个确定渐变的位置，然后再通过xxx.addColorStop()添加颜色

渐变类型

• createLinearGradient('起点left','起点top','终点left','终点top') 线性渐变
• createRadialGradient('第一个圆left','第一个圆top','第一个圆半径','第二个圆left','第二个圆top',''第二个圆半径') 径向渐变

线性渐变很好理解，就是从渐变的开始位置到结束位置两个点，径向渐变是先确定两个圆，从第一个圆向第二个圆进行渐变（一般情况下使用径向渐变两个圆圆心都在一个位置上）

var linearGradient = createLinearGradient(50,50,200,200);

添加颜色

• xxx.addColorStop('位置','#ffffff') 添加颜色

创建完渐变后，就可以开始向渐变中添加颜色了，颜色的设置方法是，比如刚才画的那条50,50,200,200的线性渐变的线，50，50的位置添加颜色就输入linearGradient.addColorStop('0','#ffffff'),200，200的位置添加颜色就输入linearGradient.addColorStop('1','#ffffff'),在他俩之间就输入0.5

举个栗子：

let radialGradient = context.createRadialGradient(200,200,20,200,200,150)
radialGradient.addColorStop(0,"#00FFFF");
radialGradient.addColorStop(0.25,"#0000FF");
radialGradient.addColorStop(0.5,"#00FF00");
radialGradient.addColorStop(0.75,"#ff00FF");
radialGradient.addColorStop(1,"#FFFF00");
context.fillStyle = radialGradient
context.fillRect(0,0,400,400)