小编给大家分享一下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如何实现图片缩放比例”有了一定的了解，如果想了解更多相关知识，欢迎关注编程网行业资讯频道，感谢各位的阅读！
