1. Canvas简介
canvas 是 HTML5 新增的一个标签，可以使用JavaScript来绘制各种图案。
2. Canvas 和 SVG 的区别
svg 本质上是一种使用 XML 描述 2D 图形的语言
1.svg 创建的每一个元素都是一个独立的 DOM 元素，可以通过 css 和 JS来操控 dom。
2.修改 svg 中的 DOM 元素，系统会自动进行 DOM 重绘。
Canvas 通过 JavaScript 来绘制 2D 图形
1.Canvas 只是一个 HTML 元素，其中的图形不会单独创建 DOM 元素，因此不能通过 JS 操控 Canvas 内单独的图形。
2.一旦图形被绘制完成，如果数据发生变化就需要重新绘制。
使用场景
如果要展示的数据量比较大，比如一条数据就是一个元素节点，那使用 canvas 会比较合适；
如果用户操作的交互比较多，而且对清晰度有要求（矢量图），那么使用 svg 会比较合适。
3. Canvas基本使用
3.1 创建Canvas
<!DOCTYPE html> <html lang="en"> <head> <title>canvas 基本使用</title> </head> <body> <canvas width="200" height="200"> 当前浏览器不支持canvas元素，请升级或更换浏览器！ </canvas> </body> </html>
效果
画布大小
canvas 默认画布大小是 300 * 150。
调整画布大小有两种方案：
第一种 : 通过 css 样式 ( 不推荐 )
<html> <head> <style> canvas { width: 400px; height: 400px; } </style> </head> <body> <canvas></canvas> </body> </html>
使用CSS来定义大小，在绘制时图像会伸缩：如果 CSS 的尺寸与初始画布的比例不一致，它会出现扭曲。
比如本例变成 400px * 400px，那宽度就由 300px 拉伸到 400px，高度由 150px 拉伸到 400px。
第二种 : 通过标签属性 ( 推荐 )
<html> <head> ... </head> <body> <canvas width="400" height="400"></canvas> </body> </html>
所以，使用canvas 元素提供的 width 和 height 两个属性，来设置画布的宽高。
3.2 渲染上下文
创建了一个 Canvas 画布，接下来就是获取到 Canvas 的上下文环境，通过getContext() 获得渲染上下文和绘画功能。
<html> <head> ... </head> <body> <canvas width="400" height="400"></canvas> </body> </html>
上下文类型：
2d：建立一个二维渲染上下文。
webgl： 创建一个 WebGLRenderingContext 三维渲染上下文对象。
webgl2：创建一个 WebGL2RenderingContext 三维渲染上下文对象；只在实现 WebGL 版本2 (OpenGL ES 3.0)的浏览器上可用。
3.3 画布坐标
Canvas 使用的是 W3C 坐标系 ，也就是遵循我们屏幕、报纸的阅读习惯，从上往下，从左往右，左上角为原点。
3.4 绘制直线
最简单的就是绘制一条直线。
需要用到这3个方法：
moveTo(x, y)：设置初始位置。
lineTo(x, y)：下一个点的坐标 (x, y)。
stroke()：通过线条来绘制图形轮廓。
<canvas id="canvas" width="400" height="400"></canvas> <script> // 获取 canvas 元素 var canvas = document.getElementById('canvas'); // 获取绘图上下文 var ctx = canvas.getContext('2d'); // 绘制直线 ctx.moveTo(50, 50); ctx.lineTo(200, 200); ctx.stroke(); </script>
