作者:较瘦@毛豆前端

1. cavans是什么

我们都知道HTML5新增了canvas元素,是HTML5的核心技术之一。canvas又被称为画布,我们可以使用canvas元素结合javascript来绘制各种图形,制作动画效果等

2. 基本用法

使用canvas元素绘制图形,需要以下三步

(1)获取canvas对象

(2)获取上下文对象context

(3)绘制图形

  1. <font color=green>绘制矩形</font>
       <template>
       <div>
             <canvas id="canvas" width='1200' height="1000"></canvas>
       </div>
       </template>
    
       // 矩形相关
       // 获取canvas对象
       let canvas = document.getElementById('canvas'); 
       // 获取上下文对象 context
       let context = canvas.getContext('2d');
       // 绘制矩形
       context.fillStyle = 'black'
       context.strokeStyle = 'blue'
       context.fillRect(0,0,100,100) //实心矩形 起始点的x坐标, 起始点的y坐标,矩形的宽,矩形的搞
       context.strokeRect(120, 0, 100, 100);// 空心矩形
    
    

说明:fillStyle 是context对象的一个属性,有三种取值(颜色值、渐变色、图案)

<font color=red>注意:对于canvas的宽度和高度,一定不要在css样式中定义,而是在html属性中定义(在css样式中定义,我们使用canvas对象获取的宽度和高度是默认值而不是实际的宽度和高度)。 另外:strokeStyle( fillStyle)属性的设置必须在strokeRect()或者fillRect()方法之前定义,否则属性设置无效</font>

  1. <font color=green>绘制线条</font>

    在canvas中,我们可以使用moveTo(x, y)和lineTo(x, y)这两个方法配合使用来画直线

    用法如下:

       //绘制线条
       context.strokeStyle = 'green'; // 画笔颜色
       context.moveTo(300,300); // 起点坐标
       context.lineTo(500, 500); // 终点坐标
       context.stroke(); // 绘制
    

    <font color=red>注意:canvas中使用的坐标系是W3C坐标系(y轴正方向是向下的)。如果要绘制多条线条:lineTo()这个放个是可以重复使用的,第一次lineTo()后,画笔将自动移动到终点坐标位置,第二次lineTo() 会以 “上一个终点坐标” 作为第二次调用的起点坐标,我们也可以借此画三角形、箭头等多边形</font>

  2. <font color=green>绘制圆形</font>

    我们可以使用arc(x, y, 半径, 开始角度, 结束角度, anticlockwise)方法来画一个圆

       // 画圆 在canvas中,绘制圆形或者圆弧时用到的是弧度
       context.beginPath();
       context.fillStyle = 'rgba(0,255,0,0.25)';
       context.arc(200, 220, 100, 0, Math.PI* 2, true);
       context.closePath();
       context.fill()
    

    说明:绘制圆形时需要调用beginPath()方法来声明开始,使用arc() 方法画圆完成后,还需要调用closePath() 来关闭当前路径,二者一般是配合使用的。

    arc() 方法参数说明:

    (1)x 、y 分别表示圆心横坐标和纵坐标

    (2)开始角度和结束角度都是以<font color=red>弧度</font>为单位。例如:180度 就是 Math.PI

    (3)anticlockwise 是一个布尔值,当为true时表示按逆时针绘制,为false时表示按顺时针方向绘制

  3. <font color=green>清空画布</font>

    在canvas中,我们可以使用clearRect(x, y, width, height) 方法来清空 ”指定矩形区域“

       // 清除矩形区域
       context.clearRect(50,50,120,120)
    
    

    说明:x和y 分别表示清空矩形区域最左上角的坐标, width表示矩形的宽度、height表示矩形的高度。

    <font color=red>如果要清空整个canvas,则width 和  height分别为 canvas画布的宽度和高度</font>

3. 图片操作

canvas不仅可以绘制各种形状的图形,还可以将图片导入canvas中进行各种操作。例如:平铺、切割、像素处理等

  1. <font color=green>绘制图片</font>

    我们可以使用drawImage(image, dx, dy, dw, dh) 方法来绘制图片。

    参数说明:image:表示页面中的图片

    ​ dx:表示图片左上角的横坐标

    ​ dy:表示图片左上角的纵坐标

    ​ dw:表示图片的宽度

    ​ dh:表示图片的高度

       // 画圆 在canvas中,绘制圆形或者圆弧时用到的是弧度
       context.beginPath();
       context.fillStyle = 'rgba(0,255,0,0.25)';
       context.arc(200, 220, 100, 0, Math.PI* 2, true);
       context.closePath();
       context.fill()
       // 使用clip()方法,使得切割区域为上面绘制的圆形
       context.clip()
       let image = new Image();
       image.src = ImgSrc
       image.onload = function () {
             console.log('>>>>>>>>')
             context.drawImage(image, 0, 100)
       }
    

    <font color=red>注意:必须在图片载入完成后才能将图片绘制到canvas上,如果图片没有载入完成就使用drawImage() 方法进行绘制的话,canvas将不会显示图片</font>

  2. <font color=green>切割图片</font>

    在canvas中,我们可以利用clip() 方法来切割绘制的图片

    使用方法:

    1. 绘制基本图形

    2. 使用clip() 方法

    3. 绘制图片

      <font color=green>我们可以使用矩形、多边形、圆形等作为切割区域来切割图片</font>

    <font size=2>本次主要介绍canvas的基础部分,canvas还有很多高阶应用。例如:边界检测、高级动画、canvas图表库….. 后续学习会继续分享给大家</font>


毛豆前端团队

never stop, always on the way!