HTML5Canvas如何實現(xiàn)圖片縮放比例
小編給大家分享一下HTML5 Canvas如何實現(xiàn)圖片縮放比例，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
創(chuàng)新互聯(lián)建站是一家專業(yè)提供和政企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站制作、網(wǎng)站設(shè)計、外貿(mào)網(wǎng)站建設(shè)、HTML5建站、小程序制作等業(yè)務(wù)。10年已為和政眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進(jìn)行中。
drawImage方法的又一變種是增加了兩個用于控制圖像在canvas中縮放的參數(shù)。
drawImage（圖像，x，y，寬度，高度）
其中寬度和高度分別是圖像在畫布中顯示大小。
注意：圖像可能會因為大幅度的縮放而變得起雜點或者模糊。如果您的圖像里面有文字，那么最好還是不要進(jìn)行縮放，因為那樣處理之后很可能圖像里的文字就會變得無法辨認(rèn)了。
圖片縮放示例
說明
在這個例子里，我會用一張圖片像背景一樣在畫布上以重復(fù)平鋪開來。實現(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如何實現(xiàn)圖片縮放比例”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
新聞標(biāo)題：HTML5Canvas如何實現(xiàn)圖片縮放比例
標(biāo)題鏈接：http://chinadenli.net/article36/gigopg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、定制網(wǎng)站、動態(tài)網(wǎng)站、網(wǎng)站營銷、響應(yīng)式網(wǎng)站、品牌網(wǎng)站設(shè)計
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
