HTML |画布 putImageData() 方法

putImageData() 方法用于将图像数据从指定的 ImageData 对象放回画布。

句法：

context.putImageData(imgData, x, y, dirtyX, dirtyY, dirtyWidth, dirtyHeight);

参数值：

• imgData：用于指定要放回画布的 ImageData 对象。
• x：它是 ImageData 对象左上角的 x 坐标。它以像素为单位。
• y：它是 ImageData 对象左上角的 y 坐标。它以像素为单位。
• dirtyX：它是水平 (x) 值，表示将图像放置在画布上的位置。它以像素为单位，可选。
• 脏Y：它是垂直（y）值，表示将图像放置在画布上的位置。它以像素为单位，可选。
• dirtyWidth：它是用于在画布上绘制图像的宽度。它也是可选的。
• dirtyHeight：它是用于在画布上绘制图像的高度。它也是可选的。

例子：

  

    
        GeeksforGeeks
        PutImageData() Method
        
        
  
        
            var gfg = document.getElementById("gfgCanvas");
            var context = gfg.getContext("2d");
            context.fillStyle = "green";
            context.fillRect(55, 50, 200, 100);
  
            function putImage() {
                // getImageData is used to copy the pixels
                var imageData = context.getImageData(55, 50, 200, 100);
                context.putImageData(imageData, 55, 170);
            }
        
        
        PutImageData
    

  

输出：
点击前：

点击后：

支持的浏览器： HTML canvas putImageData() 方法支持的浏览器如下：

• 铬合金
• 火狐浏览器
• 浏览器 9.0
• 歌剧
• 苹果浏览器