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()  ：本质上，路径是由很多子路径构成，这些子路径都是在一个列表中，所有的子路径（线、弧形、等等）构成图形。而每次这个方法调用之后，列表清空重置，然后我们就可以重新绘制新的图形。
                           即：调用 beginPath 是为了把前面的路径列表清空，所以一开始画路径时，beginPath可以不写的（即使写了，也没什么用）。
2. moveTo（）：画路径时（圆弧除外），这函数必须要有，不然无法画出。可以理解为笔要先移动到画布上某个点才能开始画。
                          圆弧是通过圆心定位后画图的，所以不用调用 moveTo()
3. closePath()：闭合路径，有的路径本身就是闭合的（如，rect路径）就不需要closePath了。这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。如果图形是已经闭合了的，即当前点为开始点，该函数什么也不做。
4. stroke()：通过线条来绘制图形轮廓。
5. fill()：当你调用 fill() 函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用 closePath() 函数。但是调用 stroke() 时不会自动闭合。

　　总结：beginPath 和 closePath 两者的处理的不是一个东西。beginPath 是 清除 路径列表，closePath 是闭合路径（功能上是补了一条路径）。

• 绘制 不同的路径有不同的API ：
  
  • 线：
    • lineTo(x,y)：   绘制一条从moveTo指定点 到 目标点（xy坐标）的直线。
  • 圆弧：
    • arc(x, y, radius, startAngle, endAngle, anticlockwise)
      以（x,y）为圆心，以 radius 为半径的圆弧（圆），从 startAngle（弧度） 开始到 endAngle 结束，按照 anticlockwise 给定的方向（默认为顺时针）来生成。
    • arcTo(x1, y1, x2, y2, radius) ：不过这个的实现并不是那么的可靠（MDN上说的）。
  • 贝塞尔曲线
  • 矩形：
    • rect(x,y,width,height)

• 绘制文字

  • fillText(text, x, y)：
    注意：s,y是文本的位置坐标，但不是文字左上角的对应坐标。y是文本的基线的 Y 轴坐标。
  • strokeText(text, x, y)

• 绘制图片：

  • 获取图片的源：HTMLImageElement、HTMLVideoElement、HTMLCanvasElement、ImageBitmap。
  • drawImage(image, x, y)：若调用 drawImage 时，图片没装载完，那什么都不会发生。因此你应该用 load 事件来保证不会在加载完毕之前使用这个图片。
    

    var img = new Image(); // 创建 img 元素
    img.onload = function () {
      // 执行 drawImage 语句
      ctx.drawImage(img, 10, 60)
    };
    img.src = "myImage.png"; // 设置图片源地址

    以视频帧作为图片源：绘制视频帧 画面，不像 图片加载完就能获取第一帧。video 视频加载完，此时的第一帧可能还没开始渲染。

    const canvas = document.getElementById('canvas')
    const ctx = canvas.getContext('2d')
    const video = document.getElementById("video")
    
    function getMyVideo() {
        requestAnimationFrame(getMyVideo); // 视频的每一帧都进行绘制，这时就变成视频了。
        ctx.clearRect(0, 0, 800, 800)
        ctx.drawImage(video, 0, 0) // 直接把 video 当前的帧，作为canvas的源 进行渲染。
    }
    
    getMyVideo()

     

　总结：canvas只支持两种形式的图形绘制（矩形和路径），但是canvas提供了对已有图形（文字、图片）的渲染功能。

三、canvas 样式：

1. 画笔 颜色：

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

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

ctx.globalCompositeOperation = type;