最简单的canvas基础+实践，确定不进来看看嘛

前言

怎么突然提到 canvas 呢❓其实是因为工作中有一个小需求，就是给特定的区域做水印😤，思来想去😎就选择使用 canvas 去做，简单效果如下：

实现思路🤷‍♂️：封装一个全局指令（这里案列是私有指令），利用canvas画出一块带水印文字的背景图，然后在需要的地方使用就行（很简单吧🥰）。

不过这个不是重点，这次我们的重点是 canvas。

1、canvas 简介

canvas 即画布的意思，是 HTML5 新增的元素🆕，主要用来绘制图形。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染😲。

2、canvas的基本使用

<canvas id="canvas" width="300" height="300">当前的浏览器版本不支持，请升级浏览器
</canvas> 

<canvas> 标签，只有两个可选的属性 width 和 height，分别设置标签的高度与宽度，默认值为width ：300、height ： 150。

注意⚡⚡> 使用 css 也可以设置 <canvas> 标签的宽高属性。> 不过我们不推荐使用 css 设置宽高属性，因为当 css 设置的宽高属性与初始比例不一致时会出现扭曲。

兼容性

可以看得出来，现在流行的浏览器基本都支持 canvas 标签，只有 IE9 （IE应该没有人在用了吧🤢）之下的浏览器不支持，所以我们可以放心的使用。

can i use兼容性截图，感兴趣的可以去看一下， canvas 的一些api的兼容性。

当浏览器不兼容的时候，就会显示我们标签中的备选文案（当前的浏览器版本不支持，请升级浏览器）。

⚡⚡需要注意的是 canvas 标签的结束标签 </canvas> 是不可省略的，如果省略的话，文档的其它内容就会被当成 备选文案，而不会显示出来🤦‍♂️。

使用canvas画一个简单的矩形

<canvas> 会创建一个固定大小的画布，同时会公开一个或多个画笔(渲染上下文)，使用画笔来绘制和处理要展示的内容。

在这里我们重点研究 2D 渲染上下文。 其他的上下文我们暂不研究，比如， WebGL 使用了基于 OpenGL ES的3D 上下文 (“experimental-webgl”) 。

// 获取canvas元素对象
let canvas = document.getElementById('canvas')
// 使用getContext函数来获取画笔
let ctx = canvas.getContext('2d')
// 设置颜色
ctx.fillStyle = 'green'
// 绘制矩形
ctx.fillRect(100, 100, 150, 100) 

执行上例代码，我们就可以得到如下的一个矩形😲：

我们分析一下上述的代码，以栅格的图来描述可以得到以下图片（一个格子为50）：

可以看得出来，我们画图的起点为画布的左上角，坐标为 (0,0) 。所有元素的位置都相对于原点来定位。所以图中矩形左上角的坐标为距离左边（X 轴）x 像素，距离上边（Y 轴）y 像素，坐标为 (x,y)😿。

绘制矩形的三种api

• fillRect(x, y, width, height)：绘制一个填充的矩形。
• strokeRect(x, y, width, height)：绘制一个矩形的边框。
• clearRect(x, y, widh, height)：清除指定的矩形区域，然后这块区域会变得完全透明。

3、绘制路径（path）

<canvas> 只支持一种原生的图形绘制：矩形。所有其他图形都至少需要生成一种路径 (path)🙀。

• 图形的基本元素是路径。
• 路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。
• 一个路径，甚至一个子路径，都是闭合的。

使用路径绘制图形需要一些额外的步骤：

1.创建路径起始点
2.调用绘制方法去绘制出路径
3.把路径封闭
4.一旦路径生成，通过描边或填充路径区域来渲染图形。

下面是需要用到的方法🤱：

• beginPath()：新建一条路径，路径一旦创建成功，图形绘制命令被指向到路径上生成路径。
• moveTo(x, y)：把画笔移动到指定的坐标(x, y)。相当于设置路径的起始点坐标
• lineTo(x, y)：绘制一条从当前位置到指定 x 以及 y 位置的直线。
• closePath()：闭合路径之后，图形绘制命令又重新指向到上下文中。
• stroke()：通过线条来绘制图形轮廓。
• fill()：通过填充路径的内容区域生成实心的图形。

接下来就用这些方法随意绘制一个图形📈：

// 获取canvas元素对象
let canvas = document.getElementById('canvas')
// 使用getContext函数来获取画笔
let ctx = canvas.getContext('2d')
// 开启路径绘制
ctx.beginPath();
// 移动画笔起点到(50,50)
ctx.moveTo(50, 50);
// 描述路径的行进
ctx.lineTo(180, 50);
ctx.lineTo(250, 100);
ctx.lineTo(250, 200);
// 封闭路径，closePath会自动封闭路径
ctx.closePath();
// 描边颜色
ctx.strokeStyle = 'red'
 //描边。stroke不会自动closePath()
ctx.stroke();
// 填充颜色
ctx.fillStyle = 'blue'
//描边。fill会自动closePath()
ctx.fill(); 

⚡⚡需要注意的是： 在绘制路径的时候选择不关闭路径（closePath），这个时候会实现