canvas js 绘图插件_JS原理、方法与实践 canvas作图（一）

canvas简介

canvas标签是HTML5标准最受欢迎的一个标签，它的作用就相当于一块画布，可以通过JS脚本在canvas上面进行绘画，而且还可以对画面的内容进行修改，通过不断修改可以实现动画的效果，再跟事件结合后就可以制作游戏了！

canvas标签及其所对应的JS对象HTMLCanvasElement本身非常简单，它们主要包含width、height两个属性和一个getContext方法。虽然HTML5中新增了setContext等方法，但是各大浏览器支持得并不好。

canvas本身并没有太多的操作，它主要是通过getContext方法获取的环境对象进行操作。canvas和它所包含的context对象的关系就好像canvas是一块画布，而context是各种笔，拿到笔，然后才可以绘图。

canvas的用法

首先获取canvas对象，然后使用这个对象获取相应的环境，最后使用获取的环境绘图。
代码示例：

 1
 2    "c2d" width="300" height="300">浏览器不支持canvas
 3    "c3d" width="150" height="150">浏览器不支持canvas
 4    
15

从示例中，我们可以看出利用getContext()方法获取绘图环境，目前只支持2d('2d')和3d('webgl')环境。

绘制矩形

绘制矩形是canvas中最简单的功能，跟绘制矩形相关的方法一共包括如下三个：

• strokeRect(x,y,width,height):绘制矩形边框

• fillRect(x,y,width,height):绘制矩形并填充

• clearRect(x,y,width,height): 清除矩形区域内容，实际上是使用底色填充矩形区域。
  这三个方法的参数中，x,y表示矩形左上角的坐标，width和height表示矩形的宽和高，坐标原点默认为canvas的左上角，canvas中矩形的结构如下：

  

  canvas矩形结构图

  
  代码示例：

 1    <canvas id="c2d" width="300" height="300">浏览器不支持canvascanvas>
 2    <script> 3 4        const canvas2d = document.querySelector('#c2d'); 5        const ctx2d = canvas2d.getContext('2d'); 6