canvas—画元素

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

2、canvas里面位置都是基于坐标系的，这点和DOM完全不一样。 DOM的布局是基于文档流的。下面的标签会在上面排好的基础上自动接着排列， 有点像排队。 而 canvas 都是基于坐标系的，每个部件在画时都是设定坐标确定位置的。

参考：https://www.runoob.com/w3cnote/html5-canvas-intro.html 或 https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes

一、画矩形：

// 默认画笔的宽度是1px【这是个人理解的】
/* 矩形
* */
// 矩形——实心
ctx.fillRect(10,10,100, 200)
// 矩形——边框
ctx.strokeRect(120,10,100, 200)
// 矩形——边框有宽度【不是画笔本身的宽度】
ctx.fillRect(230,10,100, 200)
ctx.clearRect(255,60,50,100)

canvas提供了一个画矩形路径的API，使用它就可以实现 路径方式画矩形：

    ctx.beginPath()
    ctx.rect(200,200,100,100)  // 矩形路径
    ctx.closePath()
    ctx.stroke() // 空心矩形，如果要画实心就用fill

二、画线（即 路径）：

/* 线
* */
// 线-直线
ctx.beginPath()
ctx.moveTo(10, 220);
ctx.lineTo(110, 220)
ctx.stroke()
// ctx.fill() /*这里无效，fill虽然会自动闭合路径，但是对于直线是无法闭合的。所以直线调用fill是无效的。无法填充*/
// 线-直角
ctx.beginPath()
ctx.moveTo(120, 220);
ctx.lineTo(220, 220)
ctx.lineTo(220, 320)
ctx.closePath()  // 自动把线连接到路径的起始位置，相当与简写了最后一个ctx.lineTo到起始位置的线。
ctx.stroke()
// 线-直角-填充
ctx.beginPath()
ctx.moveTo(230, 220);
ctx.lineTo(330, 220)
ctx.lineTo(330, 320)
ctx.stroke()
ctx.fill() // 非直线，fill会自动闭合路径，然后填充颜色。

说明：

1. 画线通过填充也是可以画矩形的，当然没有上面专门用来画矩形的方便。
2. 闭合路径closePath(),不是必需的。这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。可以理解为，
   closePath 相当于调用了 lineTo(开始点坐标)，不过 closePath 比 lineTo完美（在线宽比较大时就能体现出来）。
                           
3. 后面使用 beginPath，就会把前面的  路径列表清空重置。不影响后面的路径。
4. closePath 结束的只是路径，画笔上设置的 颜色（strokeStyle）、线宽（lineWidth）后面的路径还是会继承的。
5. 同一个路径的直角，拐角处比两条路径的拐角完美，没有缺口。类似上面使用 closePath 比 lineTo 完美。
   即，一个直角用一条路径画 或 比 分成 两条画 更 完美。

　　　　  

三、圆弧：

/* 圆
*  说明：圆不像线，从一个点开始画，圆是基于数学原理。从圆心开始定位，设定半径来实现的。所以画圆，不需要moveTo函数。
* */
//  圆弧——线
ctx.beginPath()
ctx.arc(100,380,80,0,2)
ctx.stroke()
//  圆弧——填充
ctx.beginPath()
ctx.arc(300,380,80,0,2)
ctx.fill()

四、二次贝塞尔曲线：

/* 二次贝塞尔曲线
* */
ctx.beginPath()
ctx.moveTo(10,580)
ctx.quadraticCurveTo(200,500,280,580)
ctx.stroke()

五、绘制文本：

/* 绘制文本
* */
ctx.font = "42px serif"
ctx.textAlign = "center"
ctx.textBaseline = "middle"
ctx.fillText('hello word', 10, 650)

六、绘制图片：

/* 绘制图片
* */
var img = new Image()
img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png'
ctx.drawImage(img,10,700)

完整代码：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// 默认画笔的宽度是1px【这是个人理解的】
/* 矩形
* */
// 矩形——实心
ctx.fillRect(10,10,100, 200)
// 矩形——边框
ctx.strokeRect(120,10,100, 200)
// 矩形——边框
ctx.fillRect(230,10,100, 200)
ctx.clearRect(255,60,50,100)

/*canvas中除了矩形，其它的现状都是通过路径实现的*/

/* 线
* */
// 线-直线
ctx.beginPath()
ctx.moveTo(10, 220);
ctx.lineTo(110, 220)
ctx.stroke()
// ctx.fill() /*这里无效，fill虽然会自动闭合路径，但是对于直线是无法闭合的。所以直线调用fill是无效的。无法填充*/
// 线-直角
ctx.beginPath()
ctx.moveTo(120, 220);
ctx.lineTo(220, 220)
ctx.lineTo(220, 320)
ctx.closePath()  // 自动把线连接到路径的起始位置，相当与简写了最后一个ctx.lineTo到起始位置的线。
ctx.stroke()
// 线-直角-填充
ctx.beginPath()
ctx.moveTo(230, 220);
ctx.lineTo(330, 220)
ctx.lineTo(330, 320)
ctx.stroke()
ctx.fill() // 非直线，fill会自动闭合路径，然后填充颜色。
/* 圆弧
*  说明：圆不像线，从一个点开始画，圆是基于数学原理。从圆心开始定位，设定半径来实现的。所以画圆，不需要moveTo函数。
* */
//  圆——线
ctx.beginPath()
ctx.arc(100,380,80,0,2)
ctx.stroke()
//  圆——填充
ctx.beginPath()
ctx.arc(300,380,80,0,2)
ctx.fill()
/* 二次贝塞尔曲线
* */
ctx.beginPath()
ctx.moveTo(10,580)
ctx.quadraticCurveTo(200,500,280,580)
ctx.stroke()
// //////////////////////////////////////////
/* 绘制文本
* */
ctx.font = "42px serif"
ctx.fillText('hello word', 10, 650)
/* 绘制图片
* */
var img = new Image()
img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png'
ctx.drawImage(img,10,700)