通过之前的学习，我们现在可以在HTML5了 在canvas中绘制图形和文字，并为它们设置一些样式。我们也可以<canvas>在中画图片。用于在<canvas>图片作为绘制源，可以是以下元素类型:
-
HTMLImageElement：可以是由Image()构造函数创建的图片也可以是任何图片<img>元素。 -
HTMLVideoElement：使用HTML<video>作为图片源，元素将从视频中截取当前帧作为图片源。 -
HTMLCanvasElement：另一个也可以使用<canvas>作为图片源的元素。
绘制图片
通过三种方法，我们可以使用2D上下文<canvas>中画图片。
-
drawImage(image, dx, dy); -
drawImage(image, dx, dy, dw, dh); -
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dw, dh);
绘图的基本方法：drawImage(image, dx, dy)
这种方法是在<canvas>画一张图片。image参数是要画的图片，dx和dy参数是“destinationX”和“destinationY这两个参数决定了在canvas中绘制图片的位置。
下面是一个例子。这个例子是<canvas>指定的图片开始绘制在中间(0，0)位置。
var ctx = document.getElementById(ex1).getContext('2d');
var img = new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
};
img.src = 'img/canvas-image-1.jpg';
上述代码的返回结果如下：
您的浏览器不支持HTML5 Canvas！
绘制和缩放图片：drawImage(image, dx, dy, dw, dh)
第二种在<canvas>在中画图片的方法中添加了两个参数：dw和dh，这两个参数分别是“destinationWidth”和“destinationHeight他们决定在绘制图片时是否缩放图片。
在下面的例子中，我们将绘制的图片缩小约1/3，然后重复排列形成网格。
var ctx = document.getElementById(ex2).getContext('2d');
var img = new Image();
img.onload = function(){
for (var i=0;i<4;i ){
for (var j=0;j<5;j ){
ctx.drawImage(img,j*60,i*60,60,60);
}
}
};
img.src = 'img/canvas-image-2.jpg';
上述代码的返回结果如下：
您的浏览器不支持HTML5 Canvas！
图片切片方法：drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dw, dh)
第三种在<canvas>绘制图片的方法有8个参数。image是源图片，sx和sy是“sourceX”和“sourceY这两个参数决定了在源图片上切割矩形区域的位置，该区域的图片将绘制在Canvas中。sWidth和sHeight表示矩形区域的宽度和高度。剩余的四个参数与上述图片绘制方法中的描述相同。看下面的图片，每个参数的位置都标记在图片上。
让我们看看下面的例子。在这个例子中，我们将源图片切割成一部分，然后在canvas的边框图片上绘制。
var canvas = document.getElementById(ex3);
var ctx = canvas.getContext('2d');
// 画图片切片
ctx.drawImage(document.getElementById('source'),
98, 205, 104, 124, 21, 20, 87, 104);
// 画边框图片
ctx.drawImage(document.getElementById('frame'),0,0);
上述代码的结果如下：
您的浏览器不支持HTML5 Canvas！
创建和调用图片
在你能在Canvas中画图片之前，你需要创建一个Image对象，然后将图片加载到内存中。以下是完成此操作的js代码：
var image = new Image(); image.src = "img/sample.png";
在你能画图片之前，图片必须完全加载。为了确保图片完全加载，您可以在图片完全加载后添加事件监控，并调用事件监控中的方法。以下是一个示例代码：
image.addEventListener('load', drawimage1;
或者：
var img = new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
};
返回HTML5 Canvas教程目录
相关阅读
-
MDN Using images
