Canvas
canvas 是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素。
Canvas API 提供了一个通过JavaScript 和 HTML的Canvas元素来绘制图形的方式。
它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。
Canvas API 主要聚焦于2D图形。而同样使用Canvas元素的 WebGL API 则用于绘制硬件加速的2D和3D图形。
Canvas使用
Canvas 最早是由 Apple 引入 WebKit，用于Mac OS X 的 Dashboard，随后被各个浏览器实现。
如今除一些过时的浏览器不支持Canvas元素外，所有的新版本主流浏览器都支持它。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>canvas 基本使用</title>
</head>
<body><canvas id="canvas" width="200" height="200">当前浏览器不支持canvas元素，请升级或更换浏览器！</canvas><script>// 获取 canvas 元素var canvas = document.getElementById('canvas');// 通过判断getContext方法是否存在来判断浏览器的支持性if(canvas.getContext) {// 获取绘图上下文var ctx = canvas.getContext('2d');}</script>
</body>
</html>
通过 getContext()来获取绘图上下文和绘制功能，接收参数，它是绘图上下文的类型，可能的参数有：
- 2d：建立一个二维渲染上下文。这种情况可以用
CanvasRenderingContext2D()来替换getContext('2d')。 - webgl（或 experimental-webgl）： 创建一个
WebGLRenderingContext三维渲染上下文对象。只在实现WebGL 版本1(OpenGL ES 2.0)的浏览器上可用。 - webgl2（或 experimental-webgl2）：创建一个
WebGL2RenderingContext三维渲染上下文对象。只在实现 WebGL 版本2 (OpenGL ES 3.0)的浏览器上可用。 - bitmaprenderer：创建一个只提供将canvas内容替换为指定
ImageBitmap功能的ImageBitmapRenderingContext。
绘制直线
moveTo(x, y)
设置初始位置，参数为初始位置x和y的坐标点
lineTo(x, y)
绘制一条从初始位置到指定位置的直线，参数为指定位置x和y的坐标点
stroke()
通过线条来绘制图形轮廓
fill()
填充绘制图形
// 获取 canvas 元素var canvas = document.getElementById('canvas');// 通过判断getContext方法是否存在来判断浏览器的支持性if(canvas.getContext) {// 获取绘图上下文var ctx = canvas.getContext('2d');ctx.moveTo(200, 200)ctx.lineTo(300, 300)ctx.lineTo(100, 300)ctx.lineTo(200, 200)ctx.stroke()}
绘制矩形
strokeRect(x, y, width, height)
绘制一个矩形的边框
fillRect(x, y, width, height)
绘制一个填充的矩形
clearRect(x, y, width, height)
清除指定矩形区域，让清除部分完全透明。
// 获取 canvas 元素var canvas = document.getElementById('canvas');// 通过判断getContext方法是否存在来判断浏览器的支持性if(canvas.getContext) {// 获取绘图上下文var ctx = canvas.getContext('2d');// 矩形ctx.strokeRect(200, 200, 100, 200)// 填充矩形ctx.fillRect(200, 200, 100, 200)// 透明矩形 清除指定矩形区域，让清除部分完全透明ctx.clearRect(200, 200, 10, 20)}
绘制圆弧
绘制圆弧或者圆，使用的方法是：arc(x, y, radius, startAngle, endAngle, anticlockwise)。
x和Y为圆心的坐标
radius为半径
startAngle为圆弧或圆的开始位置
endAngle为圆弧或圆的结束位置
anticlockwise是绘制的方向（不写默认为false，从顺时针方向）
ctx.arc(200, 200, 50, 0, 2 * Math.PI, false)ctx.stroke()ctx.arc(400, 400, 50, 0, Math.PI, false)ctx.fill()
绘制椭圆
添加椭圆路径。语法：ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)
x、y为椭圆的圆心位置
radiusX、radiusY 为x轴和y轴的半径
rotation：椭圆的旋转角度，以弧度表示
startAngle：开始绘制点
endAngle：结束绘制点
anticlockwise：绘制的方向（默认顺时针），可选参数。
ctx.ellipse(200, 200, 200, 100, 0, 0, 2 * Math.PI, false)ctx.fill()
路径闭合
当连续绘制多个图形时会出现图形连接到一起的情况
beginPath()
路径开始
closePath()
路径闭合
在绘制图形时closePath()可以省略，在开始绘制时重新beginPath()即可将图形分离开
贝塞尔曲线
二次
二次贝塞尔曲线 quadraticCurveTo(cp1x, cp1y, x, y)
先设置起点 然后是cp1x，cp1y控制点 x，y结束点
ctx.beginPath()ctx.moveTo(200, 200)ctx.quadraticCurveTo(300, 300, 100, 350)ctx.stroke()// 三次贝塞尔曲线 bezierCurveTo(cp1x,cp1y, cp2x,cp2y, x, y) 先设置起点 然后是cp1x，cp1y控制点 cp2x，cp2y控制点2 x，y结束点// ctx.beginPath()// ctx.moveTo(200, 200)// ctx.bezierCurveTo(100,100, 300,300, 400, 200)// ctx.stroke()
三次
三次贝塞尔曲线 bezierCurveTo(cp1x,cp1y, cp2x,cp2y, x, y)
先设置起点 然后是cp1x，cp1y控制点 cp2x，cp2y控制点2 x，y结束点
ctx.beginPath()ctx.moveTo(200, 200)ctx.bezierCurveTo(100,100, 300,300, 400, 200)ctx.stroke()
