Canvas简介

April 16th, 2019

作者：较瘦@毛豆前端

1. cavans是什么

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

2. 基本用法

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

（1）获取canvas对象

（2）获取上下文对象context

（3）绘制图形

绘制矩形

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

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

绘制线条

在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() 会以 “上一个终点坐标” 作为第二次调用的起点坐标，我们也可以借此画三角形、箭头等多边形
绘制圆形

我们可以使用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时表示按顺时针方向绘制
清空画布

在canvas中，我们可以使用clearRect(x, y, width, height) 方法来清空 ”指定矩形区域“
```
 // 清除矩形区域
 context.clearRect(50,50,120,120)
```
说明：x和y 分别表示清空矩形区域最左上角的坐标， width表示矩形的宽度、height表示矩形的高度。

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

3. 图片操作

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

绘制图片

我们可以使用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将不会显示图片

切割图片

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

使用方法：
1. 绘制基本图形
2. 使用clip() 方法
3. 绘制图片
 
 我们可以使用矩形、多边形、圆形等作为切割区域来切割图片
本次主要介绍canvas的基础部分，canvas还有很多高阶应用。例如：边界检测、高级动画、canvas图表库….. 后续学习会继续分享给大家

毛豆前端团队

never stop, always on the way!