canvas基础教程（持续更新中...）

前言：

Canvas API（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。

可以用于动画、游戏画面、数据可视化、图片编辑(如照片集)以及实时视频处理等方面。

 1. 使用canvas标签

<canvas id="canvasNode" width="300" height="300">
    游览器不支持 canvas , 替换成里面的内容。
	其他标签代替 ： <img src="url" alt="代替图">
 </canvas>

注意 ：

1. canvas 默认 宽：300 ， 高 ：150 。
2. 最好在标签里修改宽高，在CSS表中修改如果比例与默认值不同可能会使绘制的图扭曲
3. 在较老的游览器(IE9之前) ， 在 canvas 标签内一个增加不支持 canvas 时显示的内容(如果浏览器支持canvas标签, 则标签体内容不显示, 只有在浏览器不支持canvas标签时才会显示里面的内容)
4. 结束标签不可省略

 2. 渲染上下文（画布环境）

const canvas = document.querySelector('#canvasNode')

// 通过getContext检查支持性
if (!canvas?.getContext) {
    return 
}

// 通过canvas节点的 getContext方法获取渲染上下文
// 需传入一个参数 ， 2d 或 webgl 等 ，这里只介绍  2d(描绘2d 图像)

ctx = canvas.getContext('2d'); 

3.使用渲染上下文（绘制）

渲染上下文可以画图进行填充 fill()，也可以画图后描边 stroke()。

渲染上下文不设置时默认颜色是黑色 。

3.1 设置颜色

•  设置颜色分为设置填充颜色 （fillStyle()） 和 描边颜色 (strokeStyle() )。
• 每次对图形上色时 ，都会选择当前渲染上下文设置的颜色进行上色 ，默认黑色。
• 而颜色值可以使用 rgb , rbga , 颜色名称（如 red ) , 十六进制颜色码（#ff0000) …

//填充颜色 用于填充图像
 ctx.fillStyle = "pink"
//边框颜色 用与描绘边框时填充边框
 ctx.strokeStyle = 'rgb(230,11,9)'

上色：以下两种方式

1. 是创建图片后自动的立即的上色。(常用)

ctx.fillRect(x,y,width,height) : 在 左上角为（x,y) 的四边形填色。

ctx.strokeRect(x,y,width,height) :　在 左上角为（x,y) 的四边形描边。

2. 先创建图形，然后再上色 

ctx.rect(20,20,30,30) ; ctx.fill() : 先描绘了一个四边形 ， 再调用 fill() 方法填色

ctx.rect(20,20,30,30) ; ctx.stroke() : 先描绘了一个四边形 ， 再调用 fill() 方法描边

3.2 描绘图形

1、绘制图形
1). rect(x,y,width,height) ：创建一个矩形（不可见），需使用 fill/stroke 进行上色(如上方式2)

2). fillRect(x, y, width, height) ：绘制一个填充的矩形。

3). strokeRect(x, y, width, height) ：绘制一个矩形的边框。

4). clearRect(x, y, widh, height) ：清除指定的矩形区域，然后这块区域会变的完全透明

 2、绘制路径 (path)  即画线, 一般分4或5步

). 创建路径   ctx.beginPath         (必要) 

2). 设置起点  ctx.moveTo(x,y)        (必要)

3). ctx.lineTo(x,y) : 从起点到 x,y, 画直线           (必要)

4). ctx.closePath() : 会将最后的终于与起点连接起来, 闭合路径   （非必要）

5). ctx.fill() / ctx.stroke() : 填色或描边          (必要)

如果是填色 ， 那么是将终点和起点连起来形成的闭合图形进行填色。

如果是描边 ，则只描绘实际有的边，即如果没有闭合路径的话，终点与起点之间就没有线，也就不会描边

案例1: 绘制不同颜色描边

const canvas = document.querySelector('#canvasNode')
if(!canvas?.getContext) {
        console.log('您的浏览器不支持canvas')
        return
      }
      ctx = canvas.getContext('2d');

      ctx.beginPath() //创建新路径 必要
      ctx.moveTo(0, 0)  //设置起点 必要
      ctx.lineTo(150,150) //从起点到x,y画直线  必要
      ctx.lineWidth="3";
      ctx.strokeStyle = 'black'
      ctx.stroke()

      ctx.beginPath() //创建路径 必要
      ctx.moveTo(0, 300)  //设置起点 必要
      ctx.lineTo(150,150) //从起点到x,y画直线  必要
      ctx.strokeStyle = 'pink'
      ctx.stroke()

效果如下：