canvas 像素操作

最新推荐文章于 2024-02-09 08:49:51 发布

doubleicon

最新推荐文章于 2024-02-09 08:49:51 发布

阅读量1k

点赞数

分类专栏： html 文章标签： createImageData getImageData putImageData

本文链接：https://blog.csdn.net/u011872945/article/details/37820855

版权

html 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML5 Canvas中用于像素操作的三个关键方法：createImageData用于创建新的空白ImageData对象，getImageData用于获取画布指定矩形区域的像素数据，而putImageData则用于将ImageData对象的像素数据放回画布。这些方法在进行像素级别的图像处理时非常有用，例如改变颜色、透明度等。

摘要由CSDN通过智能技术生成

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>

效果图：