HTML |画布 drawImage() 方法

在 HTML5 中，canvas 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：可选参数，表示要使用的图像的高度。

例子：

HTML

 

    
        HTML | canvas drawImage() Method
    

 

     
Image:
 
    
 
     
Canvas:
 
 
    
        Your browser is not supported
        for HTML5 canvas tag.
    
 
    
        window.onload = function () {
            var c = document.getElementById("myGFGCanvas");
            var ctx = c.getContext("2d");
            var img = document.getElementById("GFG");
            ctx.drawImage(img, 20, 20);
        };
    

 

输出：