HTML canvas putImageData()用法及代码示例

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

用法:

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

参数值：

imgData:它用于指定ImageData对象以放回画布。
x:它是ImageData对象左上角的x坐标。以像素为单位。
y:它是ImageData对象左上角的y坐标。以像素为单位。
dirtyX:horizontal(x)值表示将图像放置在画布上的位置。它以像素为单位，是可选的。
dirtyY:vertical(y)值表示将图像放置在画布上的位置。它以像素为单位，是可选的。
dirtyWidth:它是用于在画布上绘制图像的宽度。它也是可选的。
dirtyHeight:它是用于在画布上绘制图像的高度。它也是可选的。

例：

<!DOCTYPE html> 
<html> 
  
<body> 
    <center> 
        <h1 style="color:green;">GeeksforGeeks</h1> 
        <h2 style="color:green;">PutImageData() Method</h2> 
        <canvas id="gfgCanvas" 
                width="300" 
                height="300" 
                style="border:1px solid ;"> 
        </canvas> 
  
        <script> 
            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); 
            } 
        </script> 
        <br> 
        <button onclick="putImage()">PutImageData</button> 
    </center> 
</body> 
  
</html>

输出：
点击之前：

单击后：

支持的浏览器：下面列出了HTML canvas putImageData()方法支持的浏览器：

chrome
火狐浏览器
Internet Explorer 9.0
Opera
苹果浏览器

相关用法

注：本文由纯净天空筛选整理自shubham_singh大神的英文原创作品 HTML | canvas putImageData() Method。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。