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

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

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

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

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

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

图片缩放示例

说明

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

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

代码

< html >

<头>

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

<！-[如果是IE]>