如何使用HTML5的drawImage()方法繪制圖像

發(fā)布時(shí)間：2021-07-28 18:30:06 來源：億速云閱讀：201 作者：chen 欄目：web開發(fā)

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

一、繪制圖像

使用drawImage()方法繪制圖像。繪圖環(huán)境提供了該方法的三個(gè)不同版本。
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) ：從圖片中切割出一個(gè)矩形區(qū)域(sourceX,sourceY,sourceWidth,sourceHeight)，縮放到指定的寬度和高度，并在canvas中(x,y)繪制出來。

二、<img>標(biāo)簽

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

<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">
//這個(gè)函數(shù)將在頁(yè)面完全加載后調(diào)用
function pageLoaded()
{
//獲取canvas對(duì)象的引用,注意tCanvas名字必須和下面body里面的id相同
var canvas = document.getElementById('tCanvas');
//獲取該canvas的2D繪圖環(huán)境
var context = canvas.getContext('2d');
//獲取圖片對(duì)象的引用
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>標(biāo)簽
</canvas>
<img src = "tk.jpg" id = "tkjpg">
</body>
</html>

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

到此，相信大家對(duì)“如何使用HTML5的drawImage()方法繪制圖像”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問一下細(xì)節(jié)

如何使用HTML5的drawImage()方法繪制圖像

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽