canvas

基本介绍

什么是canvas

canvas标签只有两个属性：width（默认300px），height（默认150px）



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节点，



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

图片

画图

要使用HTML5 Canvas绘制图像，我们可以使用画布上下文的drawImage（）方法，该方法需要一个图像对象和目标点。目标点定义图像相对于画布左，上角的距离。

由于drawImage（）方法需要一个图像对象，我们必须首先创建一个图像并在实例化drawImage（）之前等待它加载完成。我们可以通过使用图像对象的onload属性来实现这一点。



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。



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，参照下边的图解。



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);
};