本博客是本人日常学习笔记，作为重要知识点的总结记录，随笔风格可能更倾向于个人的学习习惯和方式，若对您有帮助十分荣幸，若存在问题欢迎互相学习探讨，前端小白一枚在此恭候。
一、基本使用规则
1.创建画布
2.创建绘图对象
3.开始位置 （画一条线当lineWidth特别大的时候起始点从这条线的左下角开始的）
4.结束位置
5开始画图
注意：canvas标签是不能在css中设置的，在标签上面设置width和height属性，值为不带px的数值;
栗子一：画一条直线
//1.画一条线var c = document.querySelector("canvas”);//创建画布var ctx = c.getContext("2d"); //获取绘图对象，一个画布对应一个绘图对象ctx.moveTo(100,100);ctx.lineTo(300, 100);ctx.strokeStyle = "green”;//设置线的颜色ctx.lineWidth = 5;//设置线的宽度ctx.stroke();//绘制 栗子二：再画一条线
ctx.beginPath();//重置路径;ctx.moveTo(100,100);ctx.lineTo(300, 100);//ctx.setLineDash([20,10]);//虚线参数解析：是一个数组，线的长度，空白部分ctx.strokeStyle = "green”;//设置线的颜色ctx.lineWidth = 5;//设置线的宽度ctx.stroke();//绘制
需要注意的问题：如果不重置路径，第一条线也会被重新画一次这里的解决办法有两种；
问题解决：
1.只写一次ctx.stroke();
2.第二次画线前调用:ctx.beginPath();（这个栗子采用的这种方式）
栗子三：画大于号（知识点：线的连接方式与结束方式设置）;
//连接方式（lineJoin用于设置连接处样式）//线帽：lineCap用于设置线两端结束的方式 ctx.moveTo(100, 400);ctx.lineTo(300, 500);ctx.lineTo(100, 600);ctx.strokeStyle = "red";ctx.lineWidth = 10;ctx.lineJoin = "miter"; //round(圆角)—bevel（平角）—miter(默认，尖角)ctx.lineCap = "butt"; //round---square---butt（默认）ctx.stroke();
栗子四：画一个三角形（知识点:闭合路径）
var c = document.querySelector("canvas");var ctx = c.getContext("2d");ctx.moveTo(100, 100);ctx.lineTo(100, 300);ctx.lineTo(400, 300);//ctx.lineTo(100, 100);ctx.closePath();//闭合路径，画回到原点ctx.lineJoin = "miter";ctx.strokeStyle = "green";ctx.lineWidth = 10;ctx.stroke(); 栗子五：线型渐变
var c = document.querySelector("canvas");var ctx = c.getContext("2d");//创建渐变方案（lgd）var lgd = ctx.createLinearGradient(100,100,500,100);//起始位置的横纵坐标，结束位置的横纵坐标lgd.addColorStop(0,"red");//添加渐变颜色，参数解析：第一个参数:相当于百分比的进度（0～1），第二个参数：颜色lgd.addColorStop(1,"green");ctx.strokeStyle = lgd;//将渐变方案赋给strokeStylectx.moveTo(100, 100); //毕竟是要画线还是要有起始点的ctx.lineTo(500, 100);ctx.lineWidth = 20;ctx.stroke(); 效果如下：
栗子六：径向渐变（知识点：给闭合图形进行填充样式，这里填充为景象渐变）
var c = document.querySelector("canvas");var ctx = c.getContext("2d");//创建渐变方案（lgd）//参数解析：起始园的圆心横纵坐标及半径，结束园的圆心横纵坐标以及结束圆的半径var rgd = ctx.createRadialGradient(100, 100, 50, 100, 100, 100);//添加渐变颜色rgd.addColorStop(0, "red”);rgd.addColorStop(0.5, “yellow");rgd.addColorStop(1, "green");ctx.fillStyle = rgd;//设置填充样式// ctx.rect(0, 0, 200, 200);//画矩形，开始横坐标、纵坐标、长、宽ctx.arc(100,100, 100, 0, Math.PI*2);//画圆，参数：开始圆心横坐标、纵坐标、半径、开始弧度、结束弧度// ctx.moveTo(100, 50);// ctx.lineTo(300, 50);// ctx.lineTo(300, 300);// ctx.lineTo(100, 300);// ctx.closePath();ctx.fill();//填充 效果图如下：
栗子七：非零环绕问题
var c = document.querySelector("canvas");var ctx = c.getContext("2d");//顺时针ctx.moveTo(0,0);ctx.lineTo(200,0);ctx.lineTo(200,200);ctx.lineTo(0,200);ctx.lineTo(0,0);//逆时针ctx.moveTo(50,50);ctx.lineTo(50,150);ctx.lineTo(150,150);ctx.lineTo(150,50);ctx.lineTo(50,50);ctx.fillStyle = "green";填充为绿色ctx.fill(); 效果如下：
栗子八：制作动画矩形（知识点：清理画布）
思路：每隔10毫秒清除画布，重新在新的位置画一个新的矩形；
var c = document.querySelector("canvas");var ctx = c.getContext("2d");var x = 0;//开始坐标var step = 5;//每次移动步数var i =1;//标记(设置矩形左右移动后再回来)setInterval(function(){ //清理画布 ctx.clearRect(0, 0, c.width, c.height); //绘制动画矩形 ctx.fillStyle = "green"; ctx.fillRect(x,100,100,200);//横、纵坐标，宽、高 ctx.stroke(); x += step * i;//控制横坐标 if (x >= c.width - 100) { i = -1; } else if(x <= 0) { i = 1; }}, 10) 效果为：矩形在画布上左右往返移动；