HTML5 Canvas图片缩放 Scaling

2013-10-3 09:10| 发布者: admin| 查看: 7684| 评论: 0

摘要: drawImage方法的又一变种是增加了两个用于控制图像在canvas中缩放的参数。drawImage(image,x,y,width,height)其中width和height分别是图像在canvas中显示大小。注意：图像可能会因为大幅度的缩放而变得起杂点或者模 ...

drawImage 方法的又一变种是增加了两个用于控制图像在 canvas 中缩放的参数。

drawImage(image, x, y, width, height)

其中width 和 height 分别是图像在 canvas 中显示大小。

注意：图像可能会因为大幅度的缩放而变得起杂点或者模糊。如果您的图像里面有文字，那么最好还是不要进行缩放，因为那样处理之后很可能图像里的文字就会变得无法辨认了。

说明

在这个例子里，我会用一张图片像背景一样在 canvas 中以重复平铺开来。实现起来也很简单，只需要循环铺开经过缩放的图片即可。见下面的代码，第一层 for 循环是做行重复，第二层是做列重复的。图像大小被缩放至原来的三分之一，50x38 px。

注：此例中的各个图片之间还有一定的间隙，目前还不知道如何去掉。

代码

<html>

<head>

<!--[if IE]>

<![endif]-->

function draw() {

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

var img = new Image();

img.onload = function(){

for (i=0;i<4;i++){

for (j=0;j<3;j++){

ctx.drawImage(img,j*50,i*38,50,38);

}

img.src = '../image/a.jpg';

}

</script>

</head>

</canvas>

</body>

</html>

效果

上一篇：HTML5 Canvas 绘制图像下一篇：HTML5 Canvas切片 Slicing

设为首页