canvas
canvas介绍
-
canvas是一个客户端浏览器里的画图技术，canvas也是h5的一个新标签，canvas标签就已经提供了一张所谓的画布，那么再通过js的canvas一些操作就可以达到最终画图的效果
canvas的基本使用
- 主要就是如何通过
js操作canvas才是关键所在
<canvas id="canvas" width="800" height="600">对不起，您的浏览器不支持canvas，请升级到最新版本</canvas> <script> //获取canvas的DOM对象 var canvas = document.querySelector('#canvas'); //获取canvas的画图的上下文对象，值为2d表示画2d平面图，值为webgl表示画3d立体模型图 var ctx = canvas.getContext('2d'); //填充一个样式，这个样式是给你要操作的形状的样式 ctx.fillStyle = 'red'; //填充一个矩形，前两个参数是矩形的位置，后两个参数是矩形的宽高 ctx.fillRect(50,100,200,200); </script> -
canvas画形状提供了三种方法，三个方法参数一样，都是(x,y,width,height)：
-
fillRect()：填充一个矩形，默认是黑色 -
strokeRect()：绘制一个矩形，没有填充，只是一个描边的矩形，默认描边是黑色 -
clearRect()：以矩形的形状来清除一个区域
- 因此可以发现，想画其他形状了，就要通过其他方法来操作了，在
canvas里带有stroke的方法都是画描边的形状，而带有fill的方法都是填充的形状，那么对描边形状设置样式就是对属性strokeStyle，对填充形状设置样式就是fillStyle
canvas画线的操作
- 画线操作分下边几个步骤，都是canvas对象的上下文对象的方法：
-
moveTo(x,y)：将画笔移动到指定坐标，就是开始画的位置 -
lineTo(x,y)：线绘制的结束位置坐标 -
lineWidth：线宽的设置 -
stroke()：画描边的线 -
fill()：画填充的线，但是线与线之间必须有交点才可以 -
lineCap：设置线条末端样式，butt是默认值，还有round和square两种，这个其实就是设置线帽的样式 -
lineJoin：设置线条与线条交点处的样式。有miter(默认值)、round和bevel三个值
canvas路径绘制的细节操作
-
canvas在绘制图形时，如果一段图形操作完毕后想要继续绘制其他图形了，则必须开启新路径操作，并且要闭合绘制路径
-
beginPath()：将context对象里原来的路径清除掉，但不会对已经画到界面上的路径造成影响。这样就可以终止以前的路径，开启一个新路径进行操作 -
closePath()：关闭路径，意思就是从当前的坐标点直接连接到你开始的坐标点，就是moveTo的坐标点，这种属于自动关闭闭合路径操作
摘要：相当于是手动关闭路径了就从moveTo开始，到最后lineTo结束。自动关闭路径就是从moveTo开始，利用closePath来关闭路径。fill填充操作也可以关闭路径，但会填个颜色。
绘制两个三角形（无填充与有填充）
画布
盒子移动
canvas绘制弧线操作
-
arc()：前两个参数是绘制的坐标位置，第三个参数是弧线的半径，第四个参数是开始时的角度位置，第五个参数是结束时的角度位置。角度位置理解请看下图：
参数： 1 x坐标 2 y坐标 3 半径 4 开始的角度 5 结束的角度 Math.PI/180 案例：canvas时钟
canvas绘制文本：
-
font：绘制的文本字体样式操作 -
textAlign：文本的水平对齐方式 -
textBaseline：文本垂直对齐方式 -
direction：文本内容的显示方向。ltr表示从左往右显示，rtl表示从左往右显示 -
fillText()：绘制文本到canvas上，第一个参数是文本内容，第二个和第三个参数表示文本的绘制位置坐标 - strokeText():
-
measureText()：参数就是要输出的文本内容，此方法作用就是返回文本的宽度，也就是测量文本宽度
canvas对图片的绘制操作(重点)：
-
drawImage()：绘制图片的主要方法，需要先new Image()来创建图片对象，并给对象指定src后，就可以监听img的load事件来判断图片是否加载完成，加载完成后即可使用drawImage方法绘制图片到canvas上了。
ctx.drawImage(img,x,y,w,h) // 把canvas转成一个当前图片文件的实际的base64格式路径 imgUrl = canvas.toDataURL('image/jpeg'); // 手机端 照片很大 上传 用canvas把图片重新绘制一下 （压缩）
* echarts: js插件 图表
