HTML5 Canvas如何实现图片缩放比例

小编给大家分享一下HTML5 canvas如何实现图片缩放比例，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

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 >

看完了这篇文章，相信你对“HTML5 Canvas如何实现图片缩放比例”有了一定的了解，如果想了解更多相关知识，欢迎关注编程网VUE频道，感谢各位的阅读！