HTML5Canvas如何实现图片缩放比例

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

创新互联建站是一家专业提供和政企业网站建设,专注与成都网站制作、网站设计、外贸网站建设HTML5建站、小程序制作等业务。10年已为和政众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。

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

drawImage(图像,x,y,宽度,高度)

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

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

图片缩放示例

说明

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

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

代码

< html >

  <头>

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

<!-[如果是IE]>