购物车
登陆 / 注册
微信扫码登陆

推荐手册

定义和用法

putImageData()方法将给定ImageData对象的数据绘制到画布上。如果提供矩形,则仅绘制该矩形的像素。此方法不受画布变换矩阵的影响。

注意:可以使用该getImageData()方法从画布中检索图像数据


浏览器支持




Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 putImageData() 方法。

注意:Internet Explorer 8 及之前的版本不支持 <canvas> 元素。


JavaScript 语法

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>html中文网</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>

运行实例 »

点击 "运行实例" 按钮查看在线实例


网站导航
标签地图
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ官方交流群
微信公众号
微信公众号