- canvas元素本身是没有绘图能力的，所有的绘制工作必须在 JavaScript 内部完成。
var cv = document.getElementById("myCanvas");
var context = cv.getContext("2d"); //申请一个绘制2d动画的环境
- 检测浏览器是否支持：也可以用js脚本检查if(canvas.getContext)
在不支持时可以在canvas标签文本中插入提示不支持信息。<canvas>hey！你现在的浏览器不支持canvas画布哦！请更新浏览器。</canvas>
- 常规绘制例子
-
用canvas绘制直线
(a) context.moveTo(起点x,起点y)
(b) context.lineTo(终点x,终点y)：从moveTo提供的起点开始，到lineTo的坐标绘制一条直线；若没有moveTo，则lineTo相当于moveTo。若在一个lineTo后再增设lineTo，即从上一lineTo的坐标开始向下一lineTo坐标延伸直线。
(c) context.stroke()：延给定的坐标画一条直线，也可以指定绘制直线的样式，颜色粗细等。 -
用canvas绘制矩形
(a) context.fillStyle = "color"：填充颜色
(b) context.fillRect(起点x,起点y,宽，高)：矩形起点和大小，或者绘制一个没有填充颜色只有边框的矩形 (a) context.strokeStyle = "color" ：边框颜色
(b) context.strokeRect(起点x,起点y,宽，高) :只描边不填充 -
用canvas绘制圆形
(a) context.fillStyle = "color";
(b) context.beginPath()：表示开始绘制
(c) context.arc(圆心坐标x，圆心坐标y，半径，开始角度，结束角度，是否为按照给定的开始角度和结束角度的按顺时针方向绘制)
其中：开始角度为0，结束角度为0.5 PI（正下方）,1 PI和1.5 PI（正上方）,为画饼图提供了扇形范围的依据.第五个参数是弧长Math.PI*2就是整个圆,Math.PI是半圆
(d) context.closePath()：表示结束绘制，会将结束点和开始点通过一点直线连在一起， 即将起点和终点封闭起来，有时可以不要
(e) context.fill()：表示填充图形，有时可以用context.stroke()代替
例子：
for(var i = 0;i<=15;i++){
context.beginPath();
context.arc(150,150,i*10,0,Math.PI*0.5,true); //在0开始，顺时针Math.PI*0.5结束，即圆正下方结束
context.stroke(); //不填充而只画边框
}
for(var i = 0;i<=15;i++){
context.beginPath();
context.arc(150,150,i*10,0,Math.PI*1,true);//在0开始，顺时针Math.PI结束，即圆正下方半圆结束
context.stroke(); //不填充而只画边框
}
for(var i = 0;i<=15;i++){
context.beginPath();
context.arc(150,150,i*10,0,Math.PI*1.5,true);//在0开始，顺时针Math.PI*1.5结束，即圆正上方结束
context.stroke(); //不填充而只画边框
}
for(var i = 0;i<=15;i++){
context.strokeStyle = "red"; //设置边框颜色
context.beginPath();
context.arc(150,150,i*10,0,Math.PI*2,true);
context.stroke(); //不填充而只画边框
}
- 用canvas绘制三角形
- //空心三角形
context.beginPath(); //开始绘制路径
context.moveTo(100,100); //起点坐标设为（100，100）
context.lineTo(150,150); //下一点的坐标设为（150，150）
context.lineTo(50,150); //下一点的坐标设为（50，150）
context.closePath();//连接起点与终点
context.stroke(); //绘画线条
- //实心三角形
context.fillStyle = "red"; //设置填充颜色
context.moveTo(150,50); //设置起点为(150,50)
context.lineTo(250,250);//下一点的坐标设为（150，150）
context.lineTo(50,250);//下一点的坐标设为（50，150）
context.fill(); //填充颜色，因为会整个图像填充，所以可以有closePath(),也可以没有
- //清除画布[或某部分]
context.fillStyle = "red";
context.moveTo(150,50);
context.lineTo(250,250);
context.lineTo(50,250);
context.closePath();
context.fill();
var clearBtn = document.getElementById("clearCanvas");
clearBtn.onclick=function(){
context.clearRect(0,0,150,300); //清除某一部分画布图案
//context.clearRect(起点x,起点y,画布宽,画布高);若宽高和整个画布大小一样即清除整个画布
};
- 绘制二次方贝塞尔曲线（quadraticCurveTo）
context.strokeStyle = "black"; //设置线条颜色
context.beginPath(); //开始绘制
context.moveTo(0,200); //定义开始点，从（0，200）开始绘制
//context.quadraticCurveTo（控制点x，控制点y，结束点x，结束点y），
//控制点为与其与开始坐标和结束坐标连线的两直线的交点 context.quadratciCurveTo(150,100,300,200)；
context.stroke(); //绘制线条
context.globalCompositeOperation = "source-over";
//globalCompositeOperation 属性一般用于图形组合，设置如何将一个源（新）图像绘制到目标（已有）的图像上。
//源图像 = 您打算放置到画布上的绘图。目标图像 = 您已经放置在画布上的绘图。
//源图像：↓(二次贝塞尔曲线是根据直线部分画出来的)
context.strokeStyle = "red";
context.beginPath();
context.moveTo(150,100);
context.lineTo(0,200);
context.moveTo(150,100);
context.lineTo(300,200);
context.stroke();
- 绘制三次方贝塞尔曲线（bezierCurveTo）
参考理解：https://blog.csdn.net/cdnight/article/details/48468653
context.strokeStyle = "black";
context.beginPath(); //开始绘制
context.moveTo(0,200); //从（0，200）开始绘制
context.bezierCurveTo(25,50,75,50,300,200);
//context.bezierCurveTo(控制点1坐标x，控制点1坐标y，控制点2坐标x，控制点2坐标2，终点坐标x，终点坐标y)
context.bezierCurveTo(25,50,75,50,300,200);
context.stroke();
context.globalCompositeOperation = "source-over";
context.strokeStyle = "red";
context.beginPath();
//控制点1到开始点的直线
context.moveTo(25,50);
context.lineTo(0,200);
//控制点1到控制点2（三次贝塞尔曲线就是根据这条线画出来的）
context.moveTo(25,50);
context.lineTo(75,50);
//控制点2到结束点直线
context.moveTo(75,50);
context.lineTo(300,200);
context.stroke();
-
画布的图像可以按照当前状态以堆stack的方式保存下来和按照上一次状态恢复
A. save：：用来保存Canvas的状态。save之后，可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作.
B. restore：用来恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响.
注意:save表示保存save函数之前的状态，restore表示获取save保存的状态例子：
//矩形一，填充色为橙色，边框为红色
context.fillStyle = "orange";
context.strokeStyle = "red";
context.fillRect(20,20,100,100);
context.strokeRect(20,20,100,100);
context.fill();
context.stroke();
//保持当前canvas状态
context.save();
//绘制矩形二，填充色为黄色，边框色为粉红色
context.fillStyle="yellow";
context.strokeStyle="pink";
context.fillRect(150,20,100,100);
context.strokeRect(150,20,100,100);
context.fill();
context.stroke();
//恢复上一个矩形的状态来进行绘画
// context.restore();
context.fillRect(20,150,100,100);
context.strokeRect(20,150,100,100);
无context.restore()时的画面↓：保存的是最后一次绘画样式
有context.restore()时的画面↓：保存的是context.save()的绘画样式
8. 移动坐标空间，绘制渐变伞效果
画布默认左上角为坐标原点，向右为x轴正向，向下为y轴正向。坐标空间的单位为像素，在绘制图像时，可以使用translate来移动坐标空间，使坐标空间原点移动到指定位置。
例子:
var canvasMethod = {
drawTop:function(context,fillColor){
context.fillStyle = fillColor;
context.strokeStyle = fillColor;
context.beginPath();
//从坐标0,0开始，画一个半径为30像素的正半上方圆
context.arc(0,0,30,0,Math.PI,true);
context.closePath();
context.fill();
context.save();//保存画布当前状态，移动位置，fillStyle,strokeStyle为fillColor
},
drawStick:function(context){
context.fillRect(-1.5,0,1,40);//绘制一个矩形，但这个矩形其实是向左偏移1.5像素，宽为1高为40的一条直线，根据save的样式进行填充
context.beginPath();
context.strokeStyle = "blue";
context.arc(-5,40,4,Math.PI,Math.PI*2,true);//圆心为(-5,40),半径为4,顺从从PI到2PI的方向,画的下半圆,即终点在(-1,40)
context.restore();//采用save中的画布样式,即fillStyle,strokeStyle为fillColor
context.stroke();//根据save的样式进行描边
},
printUmbrella:function(){
var context = document.getElementById("canvas1").getContext("2d");
context.translate(80,80);//第一次移动坐标原点到(80,80)
//绘制十把伞
for (var i = 0; i < 10; i++) {
context.save();//保存画布上一次状态，移动位置，fillStyle,strokeStyle默认为黑
context.translate(60*i,0);//不断改变坐标原点，每次向右移60像素(圆的直径)
this.drawTop(context,"rgb("+(30*i)+","+(255-30*i)+",255)");//绘制半圆并改变填充色彩
this.drawStick(context);//绘制雨伞柄
context.restore();//采用画布save的设置，移动位置，fillStyle,strokeStyle默认为黑
}
}
};
window.onload = function(){
canvasMethod.printUmbrella();
}
9. 旋转坐标空间
利用rotate()方法指定一个角度，改变了画布坐标和Web浏览器中的Canvas元素的像素之间的映射，使得任意后续绘图在画布中都显示为旋转的。但它并没有旋转Canvas元素本身。
只有一个参数，为旋转的角度。
接着上一个雨伞例子，改变canvasMethod.printUmbrella()方法。
printUmbrella:function(){
var context = document.getElementById("canvas1").getContext("2d");
context.translate(150,150);//第一次移动坐标原点到(150,150)
//绘制8把伞
for (var i = 0; i < 8; i++) {
context.save();//保存画布上一次的移动状态
context.rotate(Math.PI*0.25*i); //2PI/8=0.25PI，每次旋转0.25PI
context.translate(0,-100);//不断改变坐标原点，每次向上移100像素
this.drawTop(context,"rgb("+(30*i)+","+(255-30*i)+",255)");//绘制半圆并改变填充色彩
this.drawStick(context);//绘制雨伞柄
context.restore();//采用画布save的设置
}
}
10. 缩放图形
画布通过scale()去改变canvas上下文对象(context)中横纵方向的像素数目来改变图形的大小。
接收两个参数分别是x轴方向缩放倍数和y轴方向缩放倍数，都必须为正数，若要比原来大则>1,比原来小则<1。
例如，传递一个值 2.0 和 0.5 将会导致绘图路径宽度变为原来的两倍，而高度变为原来的 1/2。
例子：
function scaleCircle(context){
context.translate(250,20);
for (var i = 0; i < 80; i++) {
context.save(); //保存上一次画布的设置
context.translate(30,30);//每次迭代新的原点都移动到上一次原坐标的(30,30)
context.scale(0.95,0.95);//每次迭代横纵因子都缩小到原来的0.9倍
context.rotate(Math.PI/12)//旋转
context.beginPath();//开始进行绘制
// context.fillStyle = "red";
// context.globalAlpha="0.4";//设置颜色透明度
context.fillStyle= "rgba(155, 187, 89, 0.7)";
context.arc(0,0,50,0,Math.PI*2,true);//绘制圆
context.closePath();
context.fill();
}
}
window.onload = function(){
scaleCircle(context);
}
11. 矩阵变换
引用了理解网站内容：http://jo2.org/html5-canvas-transform/
canvas上下文对象(context)每次产生一个图像都会创建一个对应的矩阵对象，可直接对canvas变形矩阵作修改，可通过矩阵变换，使图形产生移动、旋转、切片、镜像反射的效果。
那么问题来了：图形都有矩阵,那一个图形的默认矩阵是什么样子的? 答案是:(1,0,0,1,0,0).
①为什么不全为0？其中：一个图形在没有缩放,旋转,位移什么的时候,他也会有一个属性会是1,就是缩放!因为在没有缩放的情况下,图形的缩放其实是原大小的1倍.所以,这个默认矩阵里面才会有两个1.
所以参数位置1上的1,是表示x轴上的缩放，参数位置4上的1是表示y轴上的缩放!
即：缩放可以根据：context.transform(scaleX,0,0,scaleY,0,0);来设置效果。
举一反三：
②根据图形默认矩阵，知矩阵中的最后两位参数就是表示位移距离的数字(在没有位移的情况下为0)。
即：移动可以根据：context.transform(scaleX,0,0,scaleY,transX,transY);来设置效果。
③那么剩下的两个数字(参数位置2，参数位置3)是不是表示旋转呢?
不是,他们是表示斜切。什么是斜切?把一个矩形的任一条边用力一拉,变成平行四边形,这就是斜切。
例子:
未进行斜切之前
ctx.arc(200,50,50,0,Math.PI*2)
.fillRect(200,100,50,50)
.stroke()
斜切之后
ctx.transform(1,Math.tan(Math.PI/180*30),0,1,0,0)//矩形X轴产生了斜切效果
.arc(200,50,w/2,0,Math.PI*2)
.fillRect(200,100,50,50)
.stroke()
代码中我们可以看到使用了一个tan函数,如果要用斜切,比如想斜切30度,那么就必须用tan把30度包起来,x/y轴都是如此.
可以理解为图形矩阵为ctx.transform(scaleX,skewX,skewY,scaleY,transX,transY);
新坐标x' = (scaleX)x + (skewY)y + transX
新坐标y' = (skewX)x + (scaleY)y + transY
④那怎么用transform实现图形转换呢?
旋转的效果要斜切配合缩放实现的。
比如,其他的都不变,只把图形旋转30度，代码：
var deg = Math.PI/180;
ctx.transform(Math.cos(30*deg),Math.sin(30*deg),-Math.sin(30*deg),Math.cos(30*deg),0,0)
.arc(200,50,50,0,Math.PI*2)
.fillRect(200,100,50,50)
.stroke()
其中：
cos(30*deg),
sin(30*deg),
-sin(30*deg),
cos(30*deg)
在使用transform方法实现旋转时，旋转N度时，N*deg不变，只要记住对应位置的对应三角函数cos,sin,-sin,cos就行。
原博主传授的记忆方法:CS-SC=初三-上床,不要忘记负号.
注意：canvas也提供setTransform方法直接把矩阵设为你传给他的值,会清空前面所有的transform造成的效果。
一个简单的应用例子：
context.translate(200,20);
for (var i = 0; i < 80; i++) {
context.save();
context.transform(0.95,0,0,0.95,30,30); //缩至0.95倍,移动至(30,30)
context.rotate(Math.PI/12);
context.beginPath();
context.fillStyle = "red";
context.globalAlpha="0.4";//设置颜色透明度
//其中可以利用globalAlpha()为设置透明度,也可以利用fillStyle=rgva()设置透明度
context.arc(0,0,50,0,Math.PI*2,true);
// context.closePath();
context.fill();
}
context.setTransform(1,0,0,1,10,10); //清空之前的transform样式,设置新的图形位置
context.fillStyle = "yellow";
context.fillRect(0,0,50,50);
context.fill();
12. 图形组合
默认情况下，两个图形有重叠部分时，另外一个图形会将另一个图形覆盖掉。
可以通过globalCompositeOperation属性设置。
懒得敲之属性展示系列:
-
裁切路径
使用clip(),：一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）.
或者可以理解为，在使用clip()之后，只看到clip之前信息，而clip之后的只能显示在clip所选定的区域中的图形部分，而其他会被隐藏起来。
参考理解网址:https://www.w3cplus.com/canvas/clip.html -
应用不同的线型
利用lineWidth、lineGap、lineJoin、miterLimit设置不同线形样式。
lineWidth：线粗细,默认为1
lineGap：线端点样式,默认为butt,还有round,square可选
lineJoin：线段连接的样式,默认为round(圆形),还有bevel(斜角), miter(垂直矩形)可选
miterLimit：线段相交交叉点的粗细,越大lineJoin所选的样式越明显 -
绘制线性渐变
一般用到createLinearGradient()创建线性的渐变对象, 再用addColorStop对线性渐变对象分段添加不同颜色达到渐变效果.
例子:
// createLinearGradient(渐变起始点x,渐变起始点y,渐变结束点x,渐变结束点y)
var shadow = context.createLinearGradient(0,0,200,0); //也可以理解为渐变的方向的坐标
shadow.addColorStop(0,'#ff0000');
shadow.addColorStop(1/7,'#ff9900');
shadow.addColorStop(2/7,'#ffff00');
shadow.addColorStop(3/7,'#00ff00');
shadow.addColorStop(4/7,'#00ffff');
shadow.addColorStop(5/7,'#0000ff');
shadow.addColorStop(6/7,'#ff00ff');
shadow.addColorStop(1,"#ff0000");
context.fillStyle =shadow;
context.strokeStyle = shadow;
context.fillRect(10,10,200,200);
16. 绘制径向渐变
利用createRadialGradient()创建径向渐变对象,
再用addColorStop对径向渐变对象发射状添加不同颜色达到径向渐变效果.
例子：
// createRadialGradient(渐变开始圆坐标x0.渐变开始圆坐标y0,开始圆半径r0,渐变结束圆坐标x1,渐变结束圆坐标y1,结束圆半径r1)
var shadow = context.createRadialGradient(85,85,3,100,100,100);
shadow.addColorStop(0,"white");
shadow.addColorStop(1,"orange");
context.fillStyle= shadow;
context.fillRect(10,10,200,200);
17. 绘制图案
A.context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat")
方法在指定的方向内重复指定的元素.
和设置图片背景有点类似,先new Image()对象,再将img对象传进createPattern(img,type),再将其赋予给fillStyle,即可达到填充图片的效果。
例子：
var img = new Image(); //创建新的Image对象
img.src = "https://www.easyicon.net/api/resizeApi.php?id=1209623&size=128"; //设置图像路径
img.onload = function(){ //加载图像
//创建图案
var pattern = context.createPattern(img,'repeat');
context.fillStyle = pattern;
context.fillRect(0,0,380,190);
}
B.drawImage()方法
①在画布上定位图像：context.drawImage(img,x,y);
②画布上定位图像，并规定图像的宽度和高度：context.drawImage(img,x,y,width,height);
③剪切图像，并在画布上定位被剪切的部分：context.drawImage(img,开始剪切坐标位置x,开始剪切坐标位置y,被剪切图像宽度swidth,被剪切图像高度sheight,图片位置x,图片位置y,显示图片宽度width,显示图片高度height);
var img = new Image(); //创建新的Image对象
img.src = "https://www.easyicon.net/api/resizeApi.php?id=1209623&size=128"; //设置图像路径
img.onload = function(){ //加载图像
//创建图案
context.drawImage(img,0,0);
context.font = "nomal 100px SimHei";
context.shadowOffsetX = 3;
context.shadowOffsetY = 3;
context.shadowBlur = 3;
context.shadowColor = "pink";
context.createPattern(img,'repeat');
context.fillStyle = "white";
context.fillText("wowww",50,165);
}
18. 创建阴影
例子:
//设置阴影
context.shadowOffsetX =3; //x轴方向的阴影偏移量,负数为向右偏移量
context.shadowOffsetY =3; //y轴方向的阴影偏移量,负数为向上偏移量
context.shadowBlur = 2;//阴影模糊强度
context.shadowColor = "pink";
//绘制矩形
context.fillStyle = "orange";
context.fillRect(20,20,300,80);
//绘制文本
context.font = "nomal 45px SimHei"; //设置文本字体样式
context.fillStyle = "white"; //设置文本颜色,填充颜色
context.fillText("HTML5/CSS3" ,30,64)//设置文本内容和文本位置
注意：在设置了阴影后，文字和矩形都会有阴影。
- 绘制填充/轮廓文字
A.context.fillText(文字内容,位置x,位置y[,最大宽度]),若文字内容长度超过最大宽度,文字会自动被压缩
//绘制填充文本
context.font = "nomal 45px SimHei"; //设置文本字体样式
context.fillStyle = "white"; //设置文本填充颜色
context.fillText("HTML5/CSS3" ,30,64)//设置文本内容和文本位置
B.context.strokeText(文字内容,位置x,位置y[,最大宽度]),若文字内容长度超过最大宽度,文字会自动被压缩
//绘制轮廓文本
context.font = "nomal 45px SimHei"; //设置文本字体样式
context.strokeStyle = "white"; //设置文本轮廓颜色
var text = "HTML5/CSS3";
context.strokeText(text, ,30,64)//设置文本内容和文本位置
其中：可以通过context.measureText(text)来获取对应text的宽度.
小白第一次在掘金写学习总结，从自己理解的角度记录笔记，可能对某些方法理解存在错误，欢迎指出！持续学习更新中....
