基本介绍
什么是 canvas
- <canvas> 标签是 h5 新增的元素，可以用 js 脚本语言（canvas API）绘制图形。例如，绘制图形，制作照片，创建动画，甚至进行实时视频处理和渲染。<canvas> 只是画布，js 是画笔，可以在画布上画画。
- canvas 标签只有两个属性：width（默认 300px），height（默认 150px）
<canvas id="canvas" width="300" height="150"></canvas>
var canvas = document.getElementById('canvas');
// canvas.width = 30;
// canvas.height = 300;canvas 解决了什么问题
在互联网出现的早期，Web 只不过是静态文本和链接的集合。1993 年，有人提出了 img 标签，它可以用来嵌入图像。
由于互联网的发展越来越迅猛，Web 应用已经从 Web 文档发展到 Web 应用程序。但是图像一直是静态的，人们越来越希望在其网站和应用程序中使用动态媒体（如音频、视频和交互式动画等），于是 Flash 就出现了。
但是随着 Web 应用的发展，出现了 HTML5，在 HTML5 中，浏览器中的媒体元素大受青睐。包括出现新的 Audio 和 Video 标签，可以直接将音频和视频资源放在 Web 上，而不需要其他第三方。
其次就是为了解决只能在 Web 页面中显示静态图片的问题，出现了 Canvas 标签。它是一个绘图表面，包含一组丰富的 JavaScript API，这些 API 使你能够动态创建和操作图像及动画。img 对静态图形内容起到了哪些作用，Canvas 就可能对可编写脚本的动态内容起到哪些作用。
Canvas 是为了解决 Web 页面中只能显示静态图片这个问题而提出的，一个可以使用 JavaScript 等脚本语言向其中绘制图像的 HTML 标签。
渲染上下文
canvas 起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。<canvas> 元素有一个叫做 getContext() 的方法，这个方法是用来获得渲染上下文和它的绘画功能。getContext() 只有一个参数，上下文的格式。
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');