现在的位置: 首页 > 综合 > 正文

canvas 像素操作

2018年02月12日 ⁄ 综合 ⁄ 共 2086字 ⁄ 字号 评论关闭
文章目录

canvas像素操作

createImageData

说明:创建新的、空白的ImageData对象

语法:1、以指定的尺寸(以像素计)创建新的 ImageData 对象:

var imgData=context.createImageData(width,height);

2、 创建与指定的另一个 ImageData 对象尺寸相同的新 ImageData 对象(不会复制图像数据):

var imgData=context.createImageData(imageData);

参数说明:width,ImageData对象的宽带,像素计。height:ImageData对象的高度,像素计,imageData:另外一个ImagetData对象。

说明:

createImageData() 方法创建新的空白 ImageData 对象。新对象的默认像素值 transparent black。

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

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

因此 ,transparent black 表示 (0,0,0,0)。

color/alpha 以数组形式存在,并且既然数组包含了每个像素的四条信息,数组的大小是 ImageData 对象的四倍。(获得数组大小有更简单的办法,就是使用 ImageDataObject.data.length)

包含 color/alpha 信息的数组存储于 ImageData 对象的 Data 属性中。

getImageData

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

语法:var imgData=context.getImageData(x,y,width,height);

参数说明:x,开始复制的左上角x坐标;y:开始复制的左上角y坐标。width:将要复制的矩形区域的宽带,height:将要复制的矩形区域的高度。

putImageData

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

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

参数:imgData:规定要放回画布的ImageData对象,x:ImageData对象左上角的x坐标,以像素计,y:ImageData对象的左上角的y坐标,以像素计。

dirtyX:可选,水平值(x),以像素计,在画布上放置图像的位置。dirtyY:可选。水平值(y),以像素计,在画布上放置图像的位置。

dirtyWidth:可选。在画布上绘制图像所使用的宽度。。dirtyHeight:可选。在画布上绘制图像所使用的高度。

示例代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="script/jquery-2.1.0.js"></script>
    <script type="text/javascript">
        $(function () {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            var imgData = context.createImageData(100, 100);
            var width = imgData.width;//返回 ImageData 对象的宽度
            var height = imgData.height;//返回 ImageData 对象的高度
           
            /*
            data 属性返回一个对象,该对象包含指定的 ImageData 对象的图像数据。
            对于 ImageData 对象中的每个像素,都存在着四方面的信息,即 RGBA 值:
            R - 红色 (0-255)
            G - 绿色 (0-255)
            B - 蓝色 (0-255)
            A - alpha 通道 (0-255; 0 是透明的,255 是完全可见的)
            color/alpha 以数组形式存在,并存储于 ImageData 对象的 data 属性中。
            */
            for (var i = 0; i < imgData.data.length; i += 4) {
                imgData.data[i + 0] = 0;
                imgData.data[i + 1] = 255;
                imgData.data[i + 2] = 0;
                imgData.data[i + 3] = 255;
            }
            context.putImageData(imgData, 0, 0);

            var newImgData = context.getImageData(0, 0, 30, 30);
            context.putImageData(newImgData, 110, 0);

        });
    </script>
</head>
<body>
    
    <canvas id="canvas" width="1200" height="550" ></canvas>
</body>
</html>

效果图:

抱歉!评论已关闭.