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

 

drawImage（图像，x，y，宽度，高度）

 

其中宽度和高度分别是图像在画布中显示大小。

 

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

 

 

 

图片缩放示例

说明

 

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

 

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

 

 

 

代码

 

 

 

< html >

 

  <头>

 

  < meta http-equiv = “ Content-Type” content = “ text / html; charset = utf-8” />    

 

<！-[如果是IE]>

 

<script type =“ text / javascript ”  src =“ excanvas.js”> </ script>

 

<script type =“ text / javascript ”  src =“ excanvas.compiled.js”> </ script>

 

<！[ endif ]->

 

<脚本类型= “ text / javascript” > 

 

函数 draw（）{

 

   var  ctx =  document.getElementById（'canvas' ）.getContext（'2d' ）;  

 

  var  img =  new  Image（）;

 

  img.onload = 函数（）{

 

   对于 （i = 0; i <4; i ++）{

 

    对于 （j = 0; j <3; j ++）{

 

     ctx.drawImage（img，j * 50，i * 38,50,38）;

 

    }

 

   }

 

  }

 

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

 

}

 

</脚本>

 

< title >测试图像2 </ title >

 

</头>

 

  < body onload = “ draw（）;” >   

 

      < canvas id = “ canvas”宽度= “ 400” height = “ 300” >   

 

      < / /帆布>

 

  </ body >

 

</ html >