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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。