- 0133技术站
- 联系QQ：88526
- QQ交流群
- 微信公众号
灭绝小师太
更新时间：2019-04-02 13:16:55
putImageData()方法将给定ImageData对象的数据绘制到画布上。如果提供矩形，则仅绘制该矩形的像素。此方法不受画布变换矩阵的影响。
注意：可以使用该getImageData()方法从画布中检索图像数据
Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 putImageData() 方法。
注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。
void ctx .putImageData（imageData，dx，dy）; void ctx .putImageData（imageData，dx，dy，dirtyX，dirtyY，dirtyWidth，dirtyHeight）;
| 参数 | 描述 |
| imageData | 一个ImageData包含的像素值的阵列对象。 |
| dx | 将图像数据放置在目标画布中的水平位置（x坐标） |
| dy | 将图像数据放置在目标画布中的垂直位置（y坐标） |
| dirtyX | 可选的将从中提取图像数据的左上角的水平位置（x坐标），默认为0 |
| dirtyY | 可选的将从中提取图像数据的左上角的垂直位置（y坐标），默认为0 |
| dirtyWidth | 可选的要绘制的矩形的宽度。默认为图像数据的宽度 |
| dirtyHeight | 可选的要绘制的矩形的高度。默认为图像数据的高度 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>0133技术站</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
function putImageData(ctx, imageData, dx, dy,
dirtyX, dirtyY, dirtyWidth, dirtyHeight) {
var data = imageData.data;
var height = imageData.height;
var width = imageData.width;
dirtyX = dirtyX || 0;
dirtyY = dirtyY || 0;
dirtyWidth = dirtyWidth !== undefined? dirtyWidth: width;
dirtyHeight = dirtyHeight !== undefined? dirtyHeight: height;
var limitBottom = dirtyY + dirtyHeight;
var limitRight = dirtyX + dirtyWidth;
for (var y = dirtyY; y < limitBottom; y++) {
for (var x = dirtyX; x < limitRight; x++) {
var pos = y * width + x;
ctx.fillStyle = 'rgba(' + data[pos*4+0]
+ ',' + data[pos*4+1]
+ ',' + data[pos*4+2]
+ ',' + (data[pos*4+3]/255) + ')';
ctx.fillRect(x + dx, y + dy, 1, 1);
}
}
}
ctx.fillRect(0, 0, 100, 100);
var imagedata = ctx.getImageData(0, 0, 100, 100);
putImageData(ctx, imagedata, 150, 0, 50, 50, 25, 25);
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
推荐手册