HTML5 Canvas如何實(shí)現(xiàn)圖片縮放比例

小編給大家分享一下HTML5 Canvas如何實(shí)現(xiàn)圖片縮放比例，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

drawImage方法的又一變種是增加了兩個用于控制圖像在canvas中縮放的參數(shù)。

drawImage（圖像，x，y，寬度，高度）

其中寬度和高度分別是圖像在畫布中顯示大小。

注意：圖像可能會因?yàn)榇蠓鹊目s放而變得起雜點(diǎn)或者模糊。如果您的圖像里面有文字，那么最好還是不要進(jìn)行縮放，因?yàn)槟菢犹幚碇蠛芸赡軋D像里的文字就會變得無法辨認(rèn)了。

圖片縮放示例

說明

在這個例子里，我會用一張圖片像背景一樣在畫布上以重復(fù)平鋪開來。實(shí)現(xiàn)起來也很簡單，只需要循環(huán)鋪開通過縮放的圖片即可。見下面的代碼，第一層圖像大小被縮放至原來的擴(kuò)大，50x38像素。為循環(huán)是做行重復(fù)，第二層是做列重復(fù)的。

注：此例中的各個圖片之間還有一定的間隙，目前還不知道如何去掉。

代碼

< 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” > 

函數(shù) draw（）{

   var  ctx =  document.getElementById（'canvas' ）.getContext（'2d' ）;  

  var  img =  new  Image（）;

  img.onload = 函數(shù)（）{

   對于 （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如何實(shí)現(xiàn)圖片縮放比例”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！