请选择 进入手机版 | 继续访问电脑版

HTML5星空

HTML5星空 首页 HTML5教程 Canvas 查看内容

HTML5 Canvas图片缩放 Scaling

2013-10-3 09:10| 发布者: admin| 查看: 6321| 评论: 0

摘要: drawImage方法的又一变种是增加了两个用于控制图像在canvas中缩放的参数。drawImage(image,x,y,width,height)其中width和height分别是图像在canvas中显示大小。注意:图像可能会因为大幅度的缩放而变得起杂点或者模 ...

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

drawImage(image, x, y, width, height)

其中width 和 height 分别是图像在 canvas 中显示大小。

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

 

图片缩放示例

说明

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

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

 

代码

 

<html>

  <head>

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

<!--[if IE]>

<script type="text/javascriptsrc="excanvas.js"></script>

<script type="text/javascriptsrc="excanvas.compiled.js"></script>

<![endif]-->

<script type="text/javascript">

function draw() {

   var ctx =    document.getElementById('canvas').getContext('2d');

  var img = new Image();

  img.onload = function(){

   for (i=0;i<4;i++){

    for (j=0;j<3;j++){

     ctx.drawImage(img,j*50,i*38,50,38);

    }

   }

  }

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

}

</script>

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

</head>

  <body onload="draw();" > 

      <canvas id="canvas" width="400" height="300">

      </canvas>

  </body>

</html>

效果



鲜花

握手

雷人

路过

鸡蛋

相关阅读

快讯
发布主题

     京ICP备14042305号

html5star team © 2012-2013 html5星空 Comsenz Inc.

GMT+8, 2017-11-25 07:49 , Processed in 0.078771 second(s), 26 queries .

返回顶部