快捷导航

栏目导航

canvas putImageData()详解

2017-2-1 14:07| 发布者: 蚂蚁小编| 查看: 520| 评论: 0|来自: 钱柜手机网页版

此方法会将图像数据放会画布。

这个图像数据是一个ImageData对象。

通常和getImageData()方法配合使用,具体可以参阅canvas getImageData操作像素一章节。

语法结构一:

[JavaScript] 纯文本查看 复制代码
ctx.putImageData(imagedata, dx, dy);

参数解析:

(1).imagedata:包含图像数据的一个对象,关于此对象具体可以参阅canvas getImageData操作像素一章节。

(2).dx:源图像数据在目标画布中的位置偏移量(x 轴方向的偏移量)。

(3).dy:源图像数据在目标画布中的位置偏移量(y 轴方向的偏移量)。

代码实例中,我们会使用如下图片:

1.png

特别说明:图片的每一个方格的尺寸103x33像素。

代码实例如下:

[HTML] 纯文本查看 复制代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<title>钱柜手机网页版</title>
<style>
canvas {
  border: 2px dotted #ccc;
}
</style>
<script>
window.onload = function () {
  var cvs = document.getElementById("canvas");
  var img = document.getElementById("ant");
  var obt = document.getElementById("bt");
  var ctx = cvs.getContext("2d");
  obt.onclick = function () {
    ctx.drawImage(img, 0, 0);
    var imgData = ctx.getImageData(0, 0, cvs.width, cvs.height);
    ctx.putImageData(imgData, 0, 0);
  }
}
</script>
</head>
<body>
<img id="ant" src="mytest/demo/mybg.png"><br/>
<canvas id="canvas" width="738" height="280"></canvas><br/>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>

上面的代码可以将源数据放置于画布上,开始防止的坐标是(0,0)。

语法结构二:

[JavaScript] 纯文本查看 复制代码
ctx.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight)

参数解析:

(1).imagedata:包含图像数据的一个对象,关于此对象具体可以参阅canvas getImageData操作像素一章节。

(2).dx:源图像数据在目标画布中的位置偏移量(x 轴方向的偏移量)。

(3).dy:源图像数据在目标画布中的位置偏移量(y 轴方向的偏移量)。

(4).dirtyX:在源图像数据中,矩形区域左上角的位置。默认是整个图像数据的左上角(x 坐标)。

(5).dirtyY:在源图像数据中,矩形区域左上角的位置。默认是整个图像数据的左上角(y 坐标)。

(6).dirtyWidth:在源图像数据中,矩形区域的宽度。默认是图像数据的宽度。

(7).dirtyHeight:在源图像数据中,矩形区域的高度。默认是图像数据的高度。

代码实例如下:

[HTML] 纯文本查看 复制代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<title>钱柜手机网页版</title>
<style>
canvas {
  border: 2px dotted #ccc;
}
</style>
<script>
window.onload = function () {
  var cvs = document.getElementById("canvas");
  var img = document.getElementById("ant");
  var obt = document.getElementById("bt");
  var ctx = cvs.getContext("2d");
  obt.onclick = function () {
    ctx.drawImage(img, 0, 0);
    var imgData = ctx.getImageData(0, 0, cvs.width, cvs.height);
    ctx.clearRect(0, 0, 738,280);
    ctx.putImageData(imgData, 20, 20,103,33,206,66);
  }
}
</script>
</head>
<body>
<img id="ant" src="mytest/demo/mybg.png"><br/>
<canvas id="canvas" width="738" height="280"></canvas><br/>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>

上面的代码演示第二种语法结构,下面做一下分析。

[JavaScript] 纯文本查看 复制代码
ctx.putImageData(imgData, 20, 20,103,33,206,66);

我们规定从画布(20,20)开始绘制数据,然而实际的表现看起来远大于这个坐标:

2.jpg

其实这并没有错,因为我们规定从源数据(103,33)位置开始读取数据,那么很自然没有读取的部分显示为空白。


鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2018-4-17 16:53 , Processed in 0.441453 second(s), 23 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 钱柜手机网页版

返回顶部