• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • putImageData()

    实例

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

    var c=document.getelementbyid("myCanvas");
    var ctx=c.getcontext("2d");
    ctx.fillstyle="red";
    ctx.fillrect(10,10,50,50);
    function copy()
    {
    var imgdata=ctx.getimagedata(10,10,50,50);
    ctx.putimagedata(imgdata,10,70);
    }
    

    浏览器支持

    Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 putImageData()方法。
    注意:Internet Explorer 8 及之前的版本不支持<canvas>元素。

    定义和用法

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

    提示:请参阅getImageData()方法,它可复制画布上指定的矩形的像素数据。

    提示:请参阅createImageData()方法,它可创建新的空白 ImageData 对象。

    JavaScript 语法

    JavaScript 语法:context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);

    参数值

    参数描述
    imgData规定要放回画布的 ImageData 对象。
    xImageData 对象左上角的 x 坐标,以像素计。
    yImageData 对象左上角的 y 坐标,以像素计。
    dirtyX可选。水平值(x),以像素计,在画布上放置图像的位置。
    dirtyY可选。垂直值(y),以像素计,在画布上放置图像的位置。
    dirtyWidth可选。在画布上绘制图像所使用的宽度。
    dirtyHeight可选。在画布上绘制图像所使用的高度。

    上篇:getImageData()

    下篇:globalAlpha