web前端移动端课程之canvas教程系列

向右看齐 2022-08-29 04:29 139阅读 0赞

### `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对象的上下文对象的方法：
    
    1.  `moveTo(x,y)`：将画笔移动到指定坐标，就是开始画的位置
    2.  `lineTo(x,y)`：线绘制的结束位置坐标
    3.  `lineWidth`：线宽的设置
    4.  `stroke()`：画描边的线
    5.  `fill()`：画填充的线，但是线与线之间必须有交点才可以
    6.  `lineCap`：设置线条末端样式，`butt`是默认值，还有`round`和`square`两种，这个其实就是设置线帽的样式
    7.  `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
    
    ![Image 1][]
    
    案例：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插件 图表

[Image 1]: