canvas—基本介绍

参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Basic_usage（MDN） 或 

　　　https://juejin.cn/post/7116784455561248775#heading-46

一、说明：

1、canvas标签在使用的时候，内部就会创建一个画图的对象（getContext("2d") 或getContext("3d")）【这个对象包含了画图所需要的所有工具集，如画笔】。挂载在这个canvasDOM对象上。

　　js 可以直接获取这个canvas标签 对象对应的画图对象ctx。

2、通过这个ctx对象，描述画什么样的图画（ctx对象可以理解成是一个画笔）。

3、使用stroke() 或者 fill() 方法把ctx描述的图画呈现出来。

　　注：上面的2、3步骤可以合并在一起，步骤2的描述可以作为步骤3（步骤3 API的变形）的参数。如，fillText(text,x,y) 或 strokeText(text,x,y)。

　　总结：canvas在js使用分3个步骤：获取canvas标签的DOM对象，从DOM对象中取出画图对象ctx；使用画图对象ctx描述所画的图像；将描述的图像呈现从来。

 　　　　画图对象ctx常用的API：https://www.cnblogs.com/liugang-vip/p/5360283.html

二、绘制API介绍：

　　不同于 SVG，<canvas> 只支持两种形式的图形绘制：矩形和路径（由一系列点连成的线段）。所有其他类型的图形都是通过一条或者多条路径组合而成的。不过，我们拥有众多路径生成的方法让复杂图形的绘制成为了可能。

　　注意：canvas 只是在现状的绘制上只支持两种形式，但是canvas还可以绘制 文字、图像。

• 绘制矩形：canvas提供了三中方法绘制矩形
  
  1. fillRect(x,y,width,height) 
  2. strokeRect(x,y,width,height)
  3. clearRect(x,y,width,height)
绘制路径：绘制路径用到的函数
1. beginPath()  ：
2. moveTo（）：画路径时，这函数必须要有，不然无法画出。可以理解为笔一定要移动到画布上才能开始画图。
3. closePath()
4. stroke()
5. fill()

　注意：一个 beginPath（），到调用fill或 stroke的路径，画笔样式是一样的。如果画笔中途要改变样式（如，画笔的颜色、透明度），前面的路径一定要画完后（即调用fill 或 stroke）。

　　　　即，路径最后一旦调用了 fill 或 stroke，这个路径就已经画完结束了。如果要继续画路径，就得再次调用beginPath，开启一个新的路径。

• 绘制不同的路径有不同的API ：
  
  • 线：
    • lineTo(x,y)：   绘制一条从当前位置到指定x以及y位置的直线。
  • 圆弧：
    • arc(x, y, radius, startAngle, anticlockwise)
    • arcTo(x1, y1, x2, y2, radius)
  • 贝塞尔曲线
  • 矩形：
    • rect(x,y,width,height)

• 绘制文字

•  绘制图片

三、canvas 样式：

1. 画笔 颜色：

   fillStyle = "red"     // 设置图形的填充颜色。
   strokeStyle = "red"    // 设置图形轮廓的颜色。

四、绘制新形状时应用的合成操作的类型：

ctx.globalCompositeOperation = type;