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

Posted tea_year

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了web前端移动端课程之canvas教程系列相关的知识,希望对你有一定的参考价值。

canvas

canvas介绍

  • canvas是一个客户端浏览器里的画图技术,canvas也是h5的一个新标签,canvas标签就已经提供了一张所谓的画布,那么再通过jscanvas一些操作就可以达到最终画图的效果

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是默认值,还有roundsquare两种,这个其实就是设置线帽的样式
    7. lineJoin:设置线条与线条交点处的样式。有miter(默认值)、roundbevel三个值

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后,就可以监听imgload事件来判断图片是否加载完成,加载完成后即可使用drawImage方法绘制图片到canvas上了。

    ctx.drawImage(img,x,y,w,h)
    // 把canvas转成一个当前图片文件的实际的base64格式路径
    imgUrl = canvas.toDataURL('image/jpeg');
    
    
    // 手机端 照片很大 上传 用canvas把图片重新绘制一下 (压缩)
    
  
* echarts:  js插件 图表

以上是关于web前端移动端课程之canvas教程系列的主要内容,如果未能解决你的问题,请参考以下文章

Web前端之移动端课程开发之06.bootstrap

Web前端之移动端课程开发之06.bootstrap

WEB前端培训课程需要学习哪些方面的技术

从零开始学 Web 之 移动WebJD移动端网页,移动触屏事件

web前端课程技术内容之如何做一个简单的手机端页面的翻页

web前端课程技术内容之如何做一个简单的手机端页面的翻页