canvas简介

canvas简介

canvas，顾名思义就是画布。用于绘制各种图形图片。

HTML5 canvas 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.canvas标签只是图形容器，您必须使用脚本来绘制图形。
你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

特点：canvas绘制出来的图像是单纯的像素点（svg图是矢量图，也是dom元素），所画的内容与dom元素不同，canvas是一个dom元素，对其方法是对挂在canvas上对内容的操作。

canvas基本操作

由于canvas是h5新增的标签，为了防止有人用古董版本浏览器，一般会这么写，canvas出不来时就让用户升级浏览器。

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

然后就要用js对canvas进行操作，基本的画线、矩形、圆形、文字都有对应的方法，只需要弄懂其中的参数含义即可（不用背，写的时候翻一翻就可以）

// 得到canvas的画布
const myCanvas= document.getElementById("mycanvas")
// 得到画布的上下文，上下文有两个，2d的上下文和3d的上下文
// 所有的图像绘制都是通过ctx属性或者是方法进行设置的，和canvas标签没有关系了
const ctx = myCanvas.getContext("2d")

if(ctx !== null) {
    // 设置颜色
    ctx.fillStyle = 'green'
    // 绘制矩形
    ctx.fillRect(100, 100, 200, 50) 
}

下面是一些具体的方法：
(注意：canvas中的坐标都是以左上方为原点，坐标向下向右增大)

绘制矩形：

• fillRect(x, y, width, height)
  绘制一个填充的矩形
• strokeRect(x, y, width, height)
  绘制一个矩形的边框
• clearRect(x, y, width, height)
  清除指定矩形区域，让清除部分完全透明。

绘制路径与笔触：

绘制路径中我们要有一个画笔的概念，画笔有一个位置

• moveto(x,y)
  画笔移动到某处
• lineTo(x, y)画一条到某处的线
• beginPath()
  新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
• closePath()
  闭合路径之后图形绘制命令又重新指向到上下文中。
• stroke()
  通过线条来绘制图形轮廓。
• fill()
  通过填充路径的内容区域生成实心的图形。

  //一个画出三角形填色的例子
  ctx.beginPath();
      ctx.moveTo(75, 50);
      ctx.lineTo(100, 75);
      ctx.lineTo(100, 25);
      ctx.fill();

绘制颜色：

canvas中的画笔颜色修改（实际开发中容易被之前的颜色干扰，所以封装每一个绘制函数时可以再开头修改成需要的颜色）

• fillStyle = color
  设置图形的填充颜色。
• strokeStyle = color
  设置图形轮廓的颜色。

绘制文本：

• fillText(text, x, y [, maxWidth])
  在指定的 (x,y) 位置填充指定的文本，绘制的最大宽度是可选的。
• strokeText(text, x, y [, maxWidth])
  在指定的 (x,y) 位置绘制文本边框，绘制的最大宽度是可选的。
• 文本样式：
  font = value
  当前我们用来绘制文本的样式。这个字符串使用和 CSS font 属性相同的语法。默认的字体是 10px sans-serif。

除了以上，还有渐变色、透明度、线条转边样式等。需要的时候都可以一下查到而且用起来很简单，所以不必背下来，只用知道什么是可以做的和在哪里查到就可以了。

图片绘制：

这个是重点。实际开发中不可能让自己画三角形矩形圆形再填色一堆内容，更多的时候是用设计给好的图片，就是把图片画到画布上去。
drawImage
其中 image 是 image 或者 canvas 对象。
（注意这里的image是一个Image对象或者一个dom获取的img标签）

drawImage的参数设置有点让人晕头转向。我们一步一步来看。

• drawImage(image,x,y)x,y是图片的坐标，图片的左上角点坐标为（x,y）,此时图片的宽高皆为其像素默认宽高
• drawImage(image, x, y, width, height)这个方法多了 2 个参数：width 和 height，这两个参数用来控制 当向 canvas 画入时应该缩放的大小。此时图片的宽高为width、height。
• drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
  前 4 个是定义图像源的切片位置和大小，后 4 个则是定义切片的目标显示位置和大小。可以对照下图理解一下。

状态保存与回复

• save()
  保存画布 (canvas) 的所有状态
• restore()
  save 和 restore 方法是用来保存和恢复 canvas 状态的，都没有参数。Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。
• 你可以调用任意多次 save方法。每一次调用 restore 方法，上一个保存的状态就从栈中弹出，所有设定都恢复。

canvas实现动画

我们用canvas绘制了一个图形，一旦绘制成功了，canvas就像素化了他们。canvas没有能力，从画布上再次得到这个图形，也就是我们没有能力去修改已经在画布上的内容，这个就是canvas比较轻量的原因，Flash重的原因之一就有它可以通过对应的api得到已经上“画布”的内容然后再次绘制。

所以我们得到了canvas的动画的流程：画->更新数据内容->清除画布内容->重新画

// 设置颜色
ctx.fillStyle = "blue"
// 初始信号量
let left = -200
// 动画过程
setInterval(() => {
   // 清除画布,0,0代表从什么位置开始,600,600代表清除的宽度和高度
   ctx.clearRect(0,0,600,600)
   // 更新信号量
   left++
   // 如果已经走出画布，则更新信号量为初始位置
   if(left > 600) {
       left = -200
   }
   ctx.fillRect(left, 100, 200, 200)
},10)

看看上面这个例子，setInterval不断的调用它第一个参数函数的内容。函数中清除再更新方块的位置再渲染。

setInterval间隔一段时间不断调用函数的特性让我们可以用它来重绘。当然间隔一段固定的时间也有其弊端，这个时候可以用raf动画，这里不展开说明。

上面的例子中只有一个简单的图形和一个简单的left坐标，写起来很简单。但是在实际开发中，一个画布中会有很多不同的内容在动，如果为每一个内容添加其变量属性再写一堆绘制函数的话，整个代码就会先得很乱。所以我们将每一种类型的图形封装成对应的类，每一个内容是该类的对象，将该对象的数据内容存在对象中不要放在全局里，每个对象有其更新数据和绘制的方法。再在setInterval中一起调用全部对象的更新与绘制函数。

如果有兴趣还可看看看下面的文章：
https://www.cnblogs.com/bleaka/p/16143470.html