如何在 HTML5 中使用画布 drawImage() 方法？

Canvas 2D API 的canvas drawImage()方法用于在 canvas 元素上以各种方式绘制图像。此方法具有可用于显示图像或图像的一部分的附加参数。

句法：

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

方法：

• 使用 标签添加图像。
• 使用 标签绘制画布。
• 加载画布并获取上下文。
• 选择要使用的图像，
• 如果需要，绘制图像以及其他可选参数。

示例 1：在此示例中，图像在画布中的位置是使用附加参数设置的。

html

  

    
        GeeksforGeeks
    
  
    Image:
  
    
  
    Canvas:
  
    
    
      
    
        window.onload = function () {
  
            // Get the canvas element from the page
            var canvas = document.getElementById("myGFGCanvas");
  
            // Get the 2D context of the canvas
            var ctx = canvas.getContext("2d");
  
            // Get the image to be drawn on the canvas
            var image = document.getElementById("gfg_image");
  
            // Draw the image using drawImage() function
  
            // The first parameter is the image to be drawn
  
            // The second and third parameter is the
            // x and y position of the image in the canvas
            ctx.drawImage(image, 100, 20);
        }; 
    

  

输出：

示例 2：在此示例中，使用附加参数设置图像的位置和尺寸。

HTML

  

    
        GeeksforGeeks
    
  
    Image:
  
    
  
    Canvas:
  
    
    
      
    
        window.onload = function () {
  
            // Get the canvas element from the page
            var canvas = document.getElementById("myGFGCanvas");
  
            // Get the 2D context of the canvas
            var ctx = canvas.getContext("2d");
  
            // Get the image to be drawn on the canvas
            var image = document.getElementById("gfg_image");
  
            // Draw the image using drawImage() function
  
            // The first parameter is the image to be drawn
  
            // The second and third parameter is the
            // x and y position of the image in the canvas
  
            // The fourth and fifth parameter is the
            // width and height of the image to be drawn
            // in the canvas
            ctx.drawImage(image, 20, 20, 400, 200);
        }; 
    

  

输出：