HTML canvas drawImage()用法及代碼示例

在HTML5中，畫布drawImage()函數用於在畫布上顯示圖像或視頻。此函數可用於顯示整個圖像或圖像的一小部分。但是，必須先加載圖像才能將其進一步加載到畫布上。

用法:

context.drawImage(img, x, y, swidth, sheight, sx, sy, width, height);

滲透係數值：

img:它指示要在畫布上繪製的圖像或視頻。
x:它指示必須放置圖像的X坐標。
y:它指示必須放置圖像的y坐標。
swidth:它是可選參數，指示剪切圖像的寬度。
sheight:它是可選參數，指示剪切圖像的高度。
sx:它是可選參數，指示x坐標從何處開始裁剪。
sy:它是可選參數，指示從哪裏開始裁剪的y坐標。
width:它是可選參數，指示要使用的圖像的寬度。
height:它是可選參數，指示要使用的圖像的高度。

例：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML | canvas drawImage() Method 
    </title> 
</head> 
  
<body> 
    <p>Image:</p> 
    <img id="GFG" width="480" height="240" 
        src="canvas drawImage.png" alt="The Scream" /> 
  
    <p>Canvas:</p> 
  
    <canvas id="myGFGCanvas" width="520" height="300"
            style="border:1px solid #d3d3d3;"> 
        Your browser is not supported  
        for HTML5 canvas tag. 
    </canvas> 
  
    <script> 
        window.onload = function () { 
            var c = document.getElementById("myGFGCanvas"); 
            var ctx = c.getContext("2d"); 
            var img = document.getElementById("GFG"); 
            ctx.drawImage(img, 20, 20); 
        }; 
    </script> 
</body> 
  
</html>

輸出：

相關用法

注：本文由純淨天空篩選整理自utkarsh_kumar大神的英文原創作品 HTML | canvas drawImage() Method。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。