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

Posted 2021-09-24 tea_year

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
  

  

  案例：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插件 图表