基本介绍
什么是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);
};