Canvas简介

作者：较瘦@毛豆前端

1. cavans是什么

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

2. 基本用法

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

（1）获取canvas对象

（2）获取上下文对象context

（3）绘制图形

1. 绘制矩形

   
   复制代码

   // 矩形相关
   // 获取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对象的一个属性，有三种取值（颜色值、渐变色、图案）

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

2. 绘制线条

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

   用法如下：

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

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

3. 绘制圆形

   我们可以使用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）开始角度和结束角度都是以弧度为单位。例如：180度 就是 Math.PI

   （3）anticlockwise 是一个布尔值，当为true时表示按逆时针绘制，为false时表示按顺时针方向绘制

4. 清空画布

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

   // 清除矩形区域
   context.clearRect(50,50,120,120)
   
   复制代码

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

   如果要清空整个canvas，则width 和  height分别为 canvas画布的宽度和高度

3. 图片操作

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

1. 绘制图片

   我们可以使用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)
   }
   复制代码

   注意：必须在图片载入完成后才能将图片绘制到canvas上，如果图片没有载入完成就使用drawImage() 方法进行绘制的话，canvas将不会显示图片

2. 切割图片

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

   使用方法：

   1. 绘制基本图形

   2. 使用clip() 方法

   3. 绘制图片

      我们可以使用矩形、多边形、圆形等作为切割区域来切割图片

   本次主要介绍canvas的基础部分，canvas还有很多高阶应用。例如：边界检测、高级动画、canvas图表库..... 后续学习会继续分享给大家

转载于:https://juejin.im/post/5cb58e37f265da0393785df6