如何使用HTML5的drawImage()方法繪制圖像-創(chuàng)新互聯

本篇內容主要講解“如何使用HTML5的drawImage()方法繪制圖像”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“如何使用HTML5的drawImage()方法繪制圖像”吧!

為固原等地區(qū)用戶提供了全套網頁設計制作服務，及固原網站建設行業(yè)解決方案。主營業(yè)務為網站建設、成都網站建設、固原網站設計，以傳統方式定制建設網站，并提供域名空間備案等一條龍服務，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

一、繪制圖像

使用drawImage()方法繪制圖像。繪圖環(huán)境提供了該方法的三個不同版本。
drawImage(image,x,y) ：在canvas中(x,y)處繪制圖片。
drawImage(image,x,y,width,height) ：在canvas中(x,y)處繪制圖片，并將其縮放到指定的寬度和高度。
drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,x,y,width,height) ：從圖片中切割出一個矩形區(qū)域(sourceX,sourceY,sourceWidth,sourceHeight)，縮放到指定的寬度和高度，并在canvas中(x,y)繪制出來。

二、<img>標簽

繪制圖片前，還需要將圖片加載到瀏覽器中。這里我們僅僅在canvas標簽后面添加一個<img>標簽。

<img src = "tk.jpg" id = "tkjpg">

三、繪制圖片

代碼如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset = utf-8">
<title>HTML5</title>
<script type="text/javascript" charset = "utf-8">
//這個函數將在頁面完全加載后調用
function pageLoaded()
{
//獲取canvas對象的引用,注意tCanvas名字必須和下面body里面的id相同
var canvas = document.getElementById('tCanvas');
//獲取該canvas的2D繪圖環(huán)境
var context = canvas.getContext('2d');
//獲取圖片對象的引用
var image = document.getElementById('tkjpg');
//在(0,50)處繪制圖片
context.drawImage(image,0,50);
//縮小圖片至原來的一半大小
context.drawImage(image,200,50,165/2,86/2);
//繪制圖片的局部(從左上角開始切割0.7的圖片)
context.drawImage(image,0,0,0.7*165,0.7*86,300,70,0.7*165,0.7*86);
}
</script>
</head>
<body onload="pageLoaded();">
<canvas width = "500" height = "200" id = "tCanvas" style = "border:black 1px solid;">

提示：你的瀏覽器不支持<canvas>標簽
</canvas>
<img src = "tk.jpg" id = "tkjpg">
</body>
</html>

四、繪制效果
如何使用HTML5的drawImage()方法繪制圖像
五、附上原坦克素材

到此，相信大家對“如何使用HTML5的drawImage()方法繪制圖像”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯建站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！

分享名稱：如何使用HTML5的drawImage()方法繪制圖像-創(chuàng)新互聯
鏈接地址：http://aaarwkj.com/article34/ppdse.html

成都網站建設公司_創(chuàng)新互聯，為您提供品牌網站制作、企業(yè)建站、手機網站建設、微信小程序、網站設計公司、移動網站建設

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯

猜你還喜歡下面的內容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

如何使用HTML5的drawImage()方法繪制圖像-創(chuàng)新互聯