canvas
基本介绍
什么是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起初是空白的，其内容是使用javascript来呈现的。我们需要将canvas标签放在HTML文档中的某个位置，使用JavaScript访问canvas标签，创建画布上下文，然后利用HTML5 Canvas API绘制可视化。canvas元素是嵌入在HTML页面中的实际DOM节点， <canvas> 元素有一个叫做 getContext() 的方法，这个方法是用来获得画布上下文，画布上下文是一个具有属性和方法的对象，可用于在canvas元素内呈现图形，getContext()只有一个参数（ 2d or webgl (3d)），表示上下文的格式。
<canvas id="canvas" width="300" height="150"></canvas>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');图片
画图
要使用HTML5 Canvas绘制图像，我们可以使用画布上下文的drawImage（）方法，该方法需要一个图像对象和目标点。 目标点定义图像相对于画布左，上角的距离。
由于drawImage（）方法需要一个图像对象，我们必须首先创建一个图像并在实例化drawImage（）之前等待它加载完成。 我们可以通过使用图像对象的onload属性来实现这一点。
<canvas id="myCanvas" width="578" height="400"></canvas>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var imageObj = new Image();
imageObj.src = 'https://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
imageObj.onload = function() {
ctx.drawImage(imageObj, 69, 50);
};图片大小
要使用HTML5 Canvas设置图片的大小，我们可以向drawImage（）方法，添加2个额外的参数，分别表示图片的width和height。
<canvas id="myCanvas" width="578" height="200"></canvas>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var imageObj = new Image();
imageObj.src = 'https://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
imageObj.onload = function() {
var x = 188;
var y = 30;
var width = 200;
var height = 137;
ctx.drawImage(imageObj, x, y, width, height);
};图片裁剪
要使用HTML5 Canvas裁剪图像，我们可以向drawImage（）方法，添加8个附加参数，sourceX，sourceY，sourceWidth，sourceHeight，destX，destY，destWidth和destHeight，参照下边的图解。
<canvas id="myCanvas" width="578" height="200"></canvas>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.src = 'https://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
imageObj.onload = function() {
var sourceX = 150;
var sourceY = 0;
var sourceWidth = 150;
var sourceHeight = 150;
var destWidth = sourceWidth;
var destHeight = sourceHeight;
var destX = canvas.width / 2 - destWidth / 2;
var destY = canvas.height / 2 - destHeight / 2;
ctx.drawImage(imageObj, sourceX, sourceY,sourceWidth,sourceHeight,destX,destY,destWidth, destHeight);
};