六合开奖结果现场直播欢迎诸位!收藏本站注 册登 陆
常用三肖中特马:基础知识网络知识操作系统WPS网页制作数据库算法网页成功之路网络安全最新技术古典mid流行midmid背景下载中心
您现在的位置:首页 > 三肖中特马 > 文章页

canvas getImageData outImageData

Admin | 2016-5-15 8:14:46 | ReadNums | 1408 | 标签 网页制作 | 打印本页
     

  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];


问题未解决:在线咨询

云顶在线娱乐2322

(访客)
内容实用原创,讲得很好。
20xx年x月x日
(站长)
有问题请在线咨询。
20xx年x月x日