Dzwebs.Net

撰写电脑技术杂文十余年

canvas getImageData outImageData

Admin | 2016-5-15 8:14:46 | 被阅次数 | 3467

温馨提示!

如果未能解决您的问题,请点击搜索;登陆可复制文章,点击登陆

  canvas

  getImageData() 复制画布上指定矩形的像素数据,然后通过 putImageData() 将图像数据放回画布:

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

  下面是例子:

  <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
   你的浏览器不支持 canvas.
  </canvas>

  <script>
  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");
  ctx.fillStyle="green";
  ctx.fillRect(10,10,50,50);

  function copy()
  {
   var imgData=ctx.getImageData(10,10,50,50);
   ctx.putImageData(imgData,10,70);
  }
  </script>

  知识拓展

  getImageData() 方法返回 ImageData 对象,该对象拷贝了画布指定矩形的像素数据。

  对于 ImageData 对象中的每个像素,都存在着四方面的信息,即 RGBA 值:

      R - 红色 (0-255)
      G - 绿色 (0-255)
      B - 蓝色 (0-255)
      A - alpha 通道 (0-255; 0 是透明的,255 是完全可见的)

  color/alpha 以数组形式存在,并存储于 ImageData 对象的 data 属性中。

  提示:在操作完成数组中的 color/alpha 信息之后,您可以使用 putImageData() 方法将图像数据拷贝回画布上。

  例子:

  以下代码可获得被返回的 ImageData 对象中第一个像素的 color/alpha 信息:

  red=imgData.data[0];
  green=imgData.data[1];
  blue=imgData.data[2];
  alpha=imgData.data[3];


该杂文来自: 网页制作杂文

上一篇:canvas isPointInStroke isPointInPath

下一篇:固定某个对象 不随滚动条

网站备案号:

网站备案号:滇ICP备11001339号-7

版权属性:

Copyright 2007-2021-forever Inc. all Rights Reserved.

联系方式:

Email:dzwebs@126.com QQ:83539231 访问统计