0
点赞
收藏
分享

微信扫一扫

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

紫荆峰 2022-02-12 阅读 151


​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插件 图表



举报

相关推荐

0 条评论