놀면서 배우는 HTML5 (3) 픽셀과 색상 _html5 튜토리얼 스킬

1. 색상의 이해

우리는 컴퓨터 화면에서 다채로운 이미지를 볼 수 있습니다. 사실 이러한 이미지는 픽셀로 구성되어 있습니다. 그렇다면 픽셀이란 무엇입니까? 색깔은 무엇입니까? (이 두 가지 질문을 한다면 당신은 생각하는 것을 좋아하는 사람임에 틀림없습니다.) 픽셀은 실제로 메모리의 연속적인 이진 비트 집합에 해당합니다. 이진 비트이기 때문에 각 비트의 값은 물론 0 또는 0일 수 있습니다. 벌써 1개! 이러한 방식으로 이 연속된 이진 비트 집합은 0과 1로 여러 상황으로 결합될 수 있으며 각 조합은 픽셀의 색상을 결정합니다. 아래 사진을 보세요

진술: 이 기사는 원본 기사이며 모든 권리는 저자에게 있습니다! 전재를 환영합니다. 저자 Zuo Yu와 출처Blog Garden

이 그림은 6개의 픽셀을 나타내며 총 24개의 작은 상자로 구성되어 있음을 알 수 있습니다.

참고: 그림의 작은 상자는 8개의 이진 비트인 바이트를 나타냅니다.

따라서

각 픽셀은 4바이트로 구성됩니다. 이 4바이트의 의미는 그림에도 표시되어 있습니다.

첫 번째 바이트가 픽셀의 빨간색 값을 결정합니다

두 번째 바이트는 픽셀의 녹색 값을 결정합니다

세 번째 바이트는 픽셀의 파란색 값을 결정합니다

네 번째 바이트는 픽셀의 투명도 값을 결정합니다

각 색상 값의 크기는 0부터 255까지입니다(질문: 왜 255까지만 갈 수 있나요?). 투명도 값: 0은 완전히 투명함을 나타내고 255는 완전히 불투명함을 나타냅니다.

이런 방식으로

(255, 0, 0, 255) 을 사용하여 순빨간 픽셀 을 표현할 수 있습니다.

메모리에서는 다음과 같은 32비트 문자열입니다.

11111111 00000000 00000000 11111111

2. 픽셀 조작

색상과 픽셀의 본질을 이해하면 그래픽에 대해 보다 복잡한 처리를 수행할 수 있습니다.

그러나

HTML5는 현재 setPixel 또는 getPixel과 같은 픽셀을 직접 조작하는 메소드를 제공하지 않습니다. 그러나 방법도 있습니다

ImageData 개체를 사용하세요.

ImageData 객체 는 이미지 픽셀 값을 저장하는 데 사용됩니다. 너비, 높이 및 데이터의 세 가지 속성이 있습니다. 데이터 속성은 이미지의 모든 픽셀 값이 실제로 저장됩니다. 데이터.

데이터 속성은 이전 이미지에서 본 것과 똑같은 방식으로 픽셀 값을 저장합니다.

imageData.data[색인*4 0]

imageData.data[색인*4 1]

imageData.data[색인*4 2]

imageData.data[색인*4 3]

위는 데이터 배열에서 연속된 4개의 인접 값 ​​

을 꺼냅니다. 이 4개의 값은 각각 이미지의 인덱스 1픽셀의 빨간색, 녹색, 파란색 및 투명도 값입니다. 참고

: 인덱스는 0부터 시작하며, 이미지에는 총 너비 * 높이 픽셀이 있고 총 너비 * 높이 * 4개의 값이 있습니다. ​​배열에 저장됩니다 컨텍스트 객체 컨텍스트에는 ImageData 객체를 생성하고 읽고 설정하는 세 가지 방법이 있습니다.

createImageData

(너비, 높이): 메모리에 지정된 크기의 ImageData 개체(예: 픽셀 배열)를 만듭니다. 개체의 픽셀은 모두 검은색이고 투명합니다. 즉, rgba(0,0, 0,0)

getImageData(x, y, width, height): ImageData 객체를 반환합니다. 이 IamgeData 객체는 지정된 영역의 픽셀 배열을 포함합니다

putImageData(data, x, y): 화면의 지정된 영역에 ImageData 객체를 그립니다

3. 간단한 이미지 처리 예시

그렇게 말했지만, 우리는 이미지 프로그래밍에 필요한 지식을 사용하여 언젠가는 Chrome에서 PhotoShop을 플레이하게 될 것입니다. 프로그램은 아마도 다음과 같습니다:

1. 보안 오류(Security_ERR:DOM EXCEPTION 18)가 발생하지 않도록 캔버스 요소에 이미지를 그립니다. 블로그 상단의 배너 배경 이미지를 사용합니다. 이 예제를 실행하려면 자신만의 이미지로 변경해야 할 수도 있습니다

2、有四个滑动条，分别代表 GRBA 四个分量

3、拖动滑动条，图像中对应的颜色分量就会增加或者减少

4、如果图像变成透明，就会显示 canvas 元素的背景，我把这个背景设置成了我的头像，呵呵。

思路：其实就是用 getImageData 方法，将你想改变的那一块区域的像素数组取出来，然后根据你拖动的滑动条和滑动条的数值，来更改那一块区域里所有像素对应颜色分量的值。处理完毕后再用 putImageData 方法绘制到画布上，就是这么简单。

下面是代码：

简单的图像处理

复制代码

代码如下:

你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器
红色：
绿色：
蓝色：
透明：

演示效果:

<p><canvas style="background-image: url(http://images.cnblogs.com/cnblogs_com/myqiao/262115/r_2204793492575248335.jpg)" id="test1" height="230" width="295">你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器</canvas> </p> <p>红色：<input onchange="colorChange(event,0)" type="range" max="100" min="1"> </p> <p>绿色：<input onchange="colorChange(event,1)" type="range" max="100" min="1"> </p> <p>蓝色：<input onchange="colorChange(event,2)" type="range" max="100" min="1"> </p> <p>透明：<input onchange="colorChange(event,3)" type="range" max="100" min="1"> <script type="text/javascript"> //获取上下文对象 var canvas = document.getElementById("test1"); var ctx = canvas.getContext("2d"); //画布的宽度和长度 var width = parseInt(canvas.getAttribute("width")); var height = parseInt(canvas.getAttribute("height")); //装入图像 var image = new Image(); image.onload =imageLoaded; image.src = "/skins/Valentine/images/banner2.gif"; //用来保存像素数组的变量 var imageData=null; function imageLoaded() { // 将图片画到画布上 ctx.drawImage(image, 0, 0); //为了提高速度，只获取图像中一部分区域的像素数组 imageData = ctx.getImageData(0, 0, width, height); } function colorChange(event,offset){ imageLoaded(); for (var y = 0; y < imageData.height; y++) { for (x = 0;x < imageData.width; x++) { //index 为当前要处理的像素编号 var index = y * imageData.width + x; //一个像素占四个字节，即 p 为当前指针的位置 var p = index * 4; //改变当前像素 offset 颜色分量的数值，offset 取值为0-3 var color = imageData.data[p + offset] * event.target.value / 50; // 颜色值限定在[0..255] color = Math.min(255, color); //将改变后的颜色值存回数组 imageData.data[p + offset]=color } } //输出到屏幕 ctx.putImageData(imageData, 0, 0); } </script></p>
提示：您可以先修改部分代码再运行

 

四、绘制随机颜色的点

这个例子是在画布上随机选择一个点，然后再给他一个随机的颜色值，其实用到的方法和上面的例子大同小异，就是需求不同罢了。

下面是代码和程序实例：
随机颜色的点

复制代码

代码如下:

你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器

演示效果:

<p><canvas style="background-color: black" id="test2" height="300" width="300">你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器</canvas> </p> <p><input onclick="interval=setInterval(randomPixel,1);" value="画随机点" type="button"> <input onclick="clearInterval(interval);" value="停止" type="button"> <input onclick="clearCanvas();" value="清除" type="button"> <script type="text/javascript"> //获取上下文对象 var canvas2 = document.getElementById("test2"); var ctx2 = canvas2.getContext("2d"); //画布的宽度和长度 var width2 = parseInt(canvas2.getAttribute("width")); var height2 = parseInt(canvas2.getAttribute("height")); var imageData2 = ctx2.createImageData(width2, height2); function randomPixel(){ var x= parseInt(Math.random()*width2); var y= parseInt(Math.random()*height2); var index = y * imageData2.width + x; var p = index * 4; imageData2.data[p + 0] = parseInt(Math.random() * 256); imageData2.data[p + 1] = parseInt(Math.random() * 256); imageData2.data[p + 2] = parseInt(Math.random() * 256); imageData2.data[p + 3] =parseInt(Math.random() * 256); ctx2.putImageData(imageData2,0,0); } function clearCanvas(){ ctx2.clearRect(0,0,width2,height2); imageData2 = ctx2.createImageData(width2, height2); } </script></p>
提示：您可以先修改部分代码再运行