Html5Canvas初探学习笔记(12)-图片裁减和调整

上一篇讲了图片的两种操作，读入和导出，而读入图片之后的画图片我们采用的是只有三个参数的 drawImage ，本篇将分别介绍 5 个参数，和 9 个参数的 drawImage ，其实最后一个函数很像 j2me 里面的 drawRegion 。首先介绍 5 个参数的可以调整图片大小的 drawImage 函数。

代码如下：

var image = new Image();
image.src = "grossini.png";
image.onload = function(){
context.drawImage(image,50,50);
context.drawImage(image,100,50,image.width * 1.5,image.height * 1.5);
context.drawImage(image,200,50,image.width * 0.5,image.height * 0.5);
context.drawImage(image,250,50,160,50);
} 

代码如下：

var image = new Image();
image.src = "grossini.png";
image.onload = function(){
context.drawImage(image,50,50);
context.drawImage(image,0,0,image.width,image.height / 3,100,50,image.width * 1.5,image.height * 0.5);
context.drawImage(image,0,image.height / 3,image.width,image.height * 2/ 3,180,50,image.width * 1.5,image.height); 

代码如下：

var test = new Image();
test.src = "test.png";
test.onload = function(){
context.drawImage(test,50,180);
context.drawImage(test,67 * 3,0,67,121,50,280,67,121);
} 

从本例显示，从一列大图中做简单小图的裁减是裁减的用途之一。

以上就是Html5 Canvas初探学习笔记(12) -图片裁减和调整 的内容，更多相关内容请关注PHP中文网（www.gxlcms.com）！

查看更多关于Html5Canvas初探学习笔记(12)-图片裁减和调整的详细内容...