HTML<canvas>标签
画布
基础知识
<canvas id="ant" width="400" height="400"></canvas> 插入一个长宽400px的画布
<canvas>标签本身不具有绘制图片能力，需要借助于javascript
// 获取画布 let cvs = document.getElementById("ant"); // 获取绘图环境 let ctx = cvs.getContext("2d");
标签内的width height设置的是画布尺寸，而css的width height设置的是生成图片尺寸，因为canvas会被浏览器渲染为一张真正的图片，所以css是会直接拉伸图片
画布左边原点（0,0） y轴向下为正 默认原点为画布左上角
canvans translate()可以重新绘制原点 比如 ctx.translate（50,50）把原点设置为50,50
getContext
get(获取) content(上下文) 获取绘图上下文环境 为绘图提供一些必要的条件
参数2D 表示绘制2d图案
canvas 1px 像素模糊现象解决方案
当绘制宽度1px的线条时，可能真正绘制出来的线条并不是1px。
不但在视觉上模糊且宽度明显大于1px，下面介绍一下出现此问题的原因。
默认，线条的宽度是1px，很明显上面的宽度不是1px，并且还是模糊。
如果放大canvas画布，可以认为画布是由一个一个的像素组成。
模拟如下图：
如果从x轴坐标1点绘制一个宽度为1px的线条，我们可能认为将绘制出如下图案：
然而事实并非如此，canvas绘制的线条会从路径的中央向两端扩展。
图示如下
但计算机并不会仅绘制0-1和1-2的半个像素，而将绘制0-1和1-2的整个像素，那么加起来就是2px。
那么为何会模糊呢，这是因为0-0.5和1.5-2之间的内容会被更浅颜色的内容填充，所以看到模糊效果。
解决方案 moveTo起点从一个像素的中心开始 那么当向两端扩展的时候，恰好填满一个像素 例moveTo(10.5 ,10);
设置透明度
方法1、rgba设置 background-color:rgba(125,255,158,0.5);前三个参数设置背景颜色，最后一个参数0.5用来设置透明度。
方法2、 .globalAlpha可以设置全局透明度 只对它后面的路径起作用 例 ctx.globalAlpha="0.5"
擦除图案
clearRect() 例 ctx.clearRect(20, 20, 100, 50); 在指定位置擦除指定尺寸区域图案
存储与还原状态
绘图中，有些状态可能会在未来某一个时刻会用到。
此时就需要将当前的存储起来，然后再需要的时候将其还原。
使用如下两个方法可以实现存储于还原状态功能：
（1）.save()：存储状态。
（2）.restore()：还原已存储的状态。
ctx.fillStyle = "rgba(255,0,0,1)"; ctx.save(); //利用fillStyle属性设置填充颜色为rgba(255,0,0,1)。 然后调用save()可以将上述设置的状态保存起来，当然能够保存填充颜色。 ctx.restore(); ctx.fillRect(90, 90, 50, 50); 使用restore()方法可以还原之前存储的状态，自然填充色也会被重置为rgba(255,0,0,1)。 所以第三个矩形的颜色与第一个矩形的颜色相同。
路径与子路径
在绘画任何时刻，只有一条路径存在，此路径可以拥有多个子路径
路径由beginPath方法创建 子路径可以利用canvas中的line To 或者arcTo等方法创建
将描边颜色设置为红色，那么此路径中绘制的图案的描边颜色都是红色，在此路径中再绘制一条线，并将其描边颜色设置为蓝色，那么整个路径所有图案描边都会变成蓝色，包括前面已经绘制的红色线，本质是重新对整个路径进行一次描边，蓝色描边将红色描边覆盖在下面（红色描边依然存在，不要理解为重置）。
其实canvas中的绘制是这样的，当图片绘制完成之后，它就是一个事实的存在（当然也可以使用对应方法清除，比如利用clearRect方法），后面同一路径中，会根据新设置的相关属性重新绘制一次，这里注意了，它不会是清除也不是重置之前绘制的图案，而是将新绘制的图案覆盖在原来图案的上面
stroke() 方法
会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。ctx.strokeStyle="设置颜色"，
beginPath()
开辟新路径，第一个beginPath()可以省略
使用beginPath方法可以开辟一条新的路径，在新路径上绘制的图案会不对前面绘制的图案产生影响。
moveTo
由move和to两个单词构成 字面意思将某一个东西移动到指定位置
此方法可以将子路径起点移动到指定位置 例 ctx.moveTo(x,y)
closePath()
闭合一个子路径，可以将子路径终点和起点连接起来
let canvas = document.getElementById("ant");
let ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.strokeStyle = "blue";
ctx.moveTo(30,20);
ctx.lineTo(30,120);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = "red";
ctx.moveTo(30,120);
ctx.lineTo(100,120);
ctx.lineTo(140,190);
ctx.closePath();
ctx.stroke();
没闭合状态 
闭合后
isPointInPath()方法
此方法可以判断一个坐标是否位于路径之中。
如果位于路径之中，则返回true，否则返回false。
绘制线条
.setLineDash(segments)
参数 一个数组，存储虚线长度与虚线间距的数组 IE9以上才支持
第一个数组元素规定虚线尺寸，也就是我们可见的部分，比如上面的红色小线段。
第二个数组元素规定虚线与虚线之间的间隔，通过线段与间隔交替出现，构成了一个完整的虚线。可以填多组数据，但是要一一配对
填一个虚线尺寸，填一个间隔，才能循环往复
线条样式
ctx.strokeStyle = "rgba(160,100,150,0.6)";
也可以设置成渐变色 或者元素重复pattern对象
lineWidth绘制原理
当想要绘制从（3,1）到（3,5）的一条直线，那么这个直线的宽度默认并不会实现第二个图的效果。
因为宽度会沿着线条宽度的中线（红线）向两端扩展，根据需求，只要填充深蓝色的部分即可，但是计算机并不会这样。因为它不会只绘制一个像素单元格的一半，剩余的的一半也会被填充。
整个区域（浅蓝和深蓝的部分）会以实际设置颜色一半色调的颜色来填充。
但是如果线条的宽度是偶数，线条同样会从中线向两端扩展，但是能完整的填满两端的像素，那么填充颜色会保持不变。第二个网格图片演示如何实现绘制一像素直线时候，能够精准定位和保持填充颜色不变的效果，我们只要从（3.5,1）位置绘制，这样就能够完美的填充一个像素宽度。
上述代码左上边框之所以显示是10px，是因为由于从中线开始绘制向两端扩展。
所以有一半的宽度被边缘给遮挡了，只要调一下绘制就会全部显示出来。
垂直和水平方位的绘制原理都是想通的。
绘制文本
fillText() 绘制实心本文
strokeText()绘制居然描边的文本
（1）两种方法第一个参数规定了要绘制的文本是"蚂蚁部落"。
（2）.第二个和第三个参数规定文本绘制的起始位置。
(3)可不写。方法的第四个参数用来规定文本绘制区域的宽度。
如果宽度超过文本总宽度，那么一切绘制正常。
如果小于文本的总宽度，那么字体会水平缩放或者配合使用更小号的字体。
window.onload = function () { var cvs = document.getElementById("canvas"); var ctx = cvs.getContext('2d'); ctx.font = "40px Georgia";//设置字体大小和字体 跟css缩写规范一样 ctx.fillText("蚂蚁部落", 50, 50); ctx.strokeText("蚂蚁部落", 250, 50); } </script> </head> <body> <canvas id="canvas" width="600" height="200"></canvas> </body>
.fillstyle 和 .strokestyle设置颜色
.font 设置字体 跟css规范一样
特别说明:canvas中并没有设置line-height的功能，即便设置了也不会生效
文本对齐 跟css一致 .textAlign="center|end|left|right|start";
此属性仅对使用fillText或者strokeText方法绘制的文本有效。
对齐是以文本的开始绘制的x轴坐标为参考的。
绘制矩形
矩形
strokeRect()非填充矩形
ctx.strokeRect(10,10,100,100);前两个参数规定矩形左上角的坐标，最后两个参数规定矩形的宽高。
fillRect()填充矩形
ctx.fillRect(10,10,100,100);前两个参数规定矩形左上角的坐标，最后两个参数规定矩形的宽高。
虚线矩形
设置 .setLineDash(segments)
圆形
ctx.arc(100, 100, 40, 0, 2 * Math.PI);
上述代码绘制了一个比较原生态的原型，没有填充，描边也是默认的。
arc方法参数简介如下：
（1）.第一个参数规定圆心x轴坐标。
（2）.第二个参数规定圆心y轴坐标。
（3）.第三个参数规定圆的半径尺寸，单位是像素。
（4）.第四个参数规定圆绘制的起始角度。代码中 Math.PI就是π，可以为负，负就是反方向
（5）.第五个参数规定圆绘制的结束角度。
（6）.第六个参数规定逆时针绘制还是顺时针绘制。true表示逆时针，false顺时针
圆弧
arc()也可以绘制圆弧，最大的圆弧就是一个整圆
特别说明：绘制圆弧起始和终止角度用的是弧度。
下面补充一下初中关于圆的数学知识：
（1）.一个圆周的弧度是2π，值等同于代码中的2 * Math.PI。
（2）.一个圆周的角度是360。
那么可以推导出如下结论：
（1）.一度角对应(2 * Math.PI)/360弧度。
（2）.那么任意角度α对应的弧度是α*((2 * Math.PI)/360)，精简一下就是α*π/180。例 let rad = Math.PI / 180; ctx.arc(100, 100, 50, 0 * rad, 50 * rad);50弧度
浙公网安备 33010602011771号