HTML5边玩边学(3)像素和色调

日期:2020-12-12 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

1、了解色调

大家在电脑上显示屏上能够看到颜色五彩缤纷的图象,实际上这些图象全是由1个个像素点构成的。那末像素是甚么?色调又是甚么呢?(假如您提出这两个难题,您1定是个喜爱思索的人)1个像素实际上对应着运行内存中的1组持续的2进制位,因为是2进制位,每一个位上的赋值自然只能是 0 或 1 了!这样,这组持续的2进制位便可以由 0 ,1 排序组成出许多种状况,而每种排序组成就决策了这个像素的1种色调。先看看下面这幅图

申明:为本文为原創文章内容,作者保存全部支配权!欢迎转载,转载请注明作者左洸和出处blog园

 

大家能够看到这幅图叙述了6个像素点,1共由24个小方框构成。

留意:图中的1个小方框意味着1个字节,即8个2进制位。

因而,每一个像素点由4个字节构成。图中也各自标明了这4个字节意味着的含意:

第1个字节决策像素的鲜红色值

第2个字节决策像素的翠绿色值

第3个字节决策像素的蓝色值

第4个字节决策像素的全透明度值

每种分色调值的尺寸是从 0 到 255(发问:为何只能到255?) ,全透明度的赋值:0 意味着彻底全透明,255意味着彻底不全透明

这样,大家便可以用(255,0,0,255)来表明1个纯鲜红色像素

在运行内存中,他是这样的1个32位的串: 11111111 00000000 00000000 11111111

 

2、实际操作像素

掌握了色调和像素的本质,大家便可以对图型开展更为繁杂的解决。

但是,HTML5 现阶段都还没出示相近 setPixel 或 getPixel 这样立即实际操作像素点的方式, 可是大家也是有方法

便是应用 ImageData 目标:

ImageData目标用来储存图象像素值,它有 width、height和 data 3个特性,在其中 data 特性便是1个持续数字能量数组,图象的全部像素值实际上是储存在 data 里边的。

data 特性储存像素值的方式和大家在前面照片中看到的1模1样:

imageData.data[index*4 +0]

imageData.data[index*4 +1]

imageData.data[index*4 +2]

imageData.data[index*4 +3]

上面取下了 data 数字能量数组中持续邻近的4个值,这4个值各自意味着了图象中第 index+1 个像素的鲜红色、翠绿色、蓝色和全透明度值的尺寸。

留意index 从0 刚开始,图象中一共有 width * height 个像素,数字能量数组中一共储存了 width * height * 4 个标值

 

左右文目标 Context 有3个方式用来建立、载入和设定 ImageData 目标,她们各自是

createImageData(width, height):在运行内存中建立1个特定尺寸的 ImageData 目标(即像素数字能量数组),目标中的像素点全是黑色全透明的,即rgba(0,0,0,0)

getImageData(x, y, width, height):回到1个 ImageData 目标,这个 IamgeData 目标中包括了特定地区的像素数字能量数组

putImageData(data, x, y):将 ImageData 目标绘图到显示屏的特定地区上

 

3、1个简易的图象解决事例

上面说了这么多,大家用掌握的专业知识来玩玩图象程序编写,也许有1天大家就要在 Chrome 中玩 PhotoShop 了。

程序流程大约是这个模样的:

1、将1幅照片绘图到1个 canvas 元素上,以便不引起安全性不正确(Security_ERR:DOM EXCEPTION 18),我用的是我blog顶部的横幅情况照片。你要运作这个事例,将会必须改为自身的照片

2、有4个拖动条,各自意味着 GRBA 4个份量

3、拖拽拖动条,图象中对应的色调份量就会提升或降低

4、假如图象变为全透明,就会显示信息 canvas 元素的情况,我把这个情况设定变成我的头像,呵呵。

思路:实际上便是用 getImageData 方式,将你想更改的那1块地区的像素数字能量数组取下来,随后依据你拖拽的拖动条和拖动条的标值,来变更那1块地区里全部像素对应色调份量的值。解决结束后再用 putImageData 方式绘图到画布上,便是这么简易。

下面是编码:

简易的图象解决

拷贝编码
编码以下:

<canvas id="test1" width="507" height="348" style="background-image:url(http://images.cnblogs.com/cnblogs_com/myqiao/262115/r_2204793492575248335.jpg)">你的访问器不适用 &lt;canvas&gt;标识,请应用 Chrome 访问器 或 FireFox 访问器</canvas>
鲜红色:<input type="range" min="1" max="100" onchange="colorChange(event,0)"/>
翠绿色:<input type="range" min="1" max="100" onchange="colorChange(event,1)"/>
蓝色:<input type="range" min="1" max="100" onchange="colorChange(event,2)"/>
全透明:<input type="range" min="1" max="100" onchange="colorChange(event,3)"/>
<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;
//1个像素占4个字节,即 p 为当今指针的部位
var p = index * 4;
//更改当今像素 offset 色调份量的标值,offset 赋值为0⑶
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>

演试实际效果:

提醒:您能够先改动一部分编码再运作
 

4、绘图任意色调的点

这个事例是在画布上任意挑选1个点,随后再给他1个任意的色调值,实际上用到的方式和上面的事例大同市小异,便是要求不一样而已。

下面是编码和程序流程案例:
任意色调的点

拷贝编码
编码以下:

<canvas id="test2" width="300" height="300" style=" background-color: black">你的访问器不适用 &lt;canvas&gt;标识,请应用 Chrome 访问器 或 FireFox 访问器</canvas>
<input type="button" value="画任意点" onclick="interval=setInterval(randomPixel,1);" />
<input type="button" value="终止" onclick="clearInterval(interval);"/>
<input type="button" value="消除" onclick="clearCanvas();"/>
<script type="text/javascript">
//获得左右文目标
var canvas = document.getElementById("test2");
var ctx = canvas.getContext("2d");
//画布的宽度和长度
var width = parseInt(canvas.getAttribute("width"));
var height = parseInt(canvas.getAttribute("height"));
var imageData = ctx.createImageData(width, height);
function randomPixel(){
var x= parseInt(Math.random()*width);
var y= parseInt(Math.random()*height);
var index = y * width + x;
var p = index * 4;
imageData.data[p + 0] = parseInt(Math.random() * 256);
imageData.data[p + 1] = parseInt(Math.random() * 256);
imageData.data[p + 2] = parseInt(Math.random() * 256);
imageData.data[p + 3] =parseInt(Math.random() * 256);
ctx.putImageData(imageData,0,0);
}
function clearCanvas(){
ctx.clearRect(0,0,width,height);
imageData = ctx.createImageData(width, height);
}
</script>

演试实际效果:

提醒:您能够先改动一部分编码再运作