html拾色器没效果,用html和js写一个拾色器

目前粗糙了写了一个像素绘图的网页，画笔的颜色rgba的值取自html5中input标签自带的一个color类型的拾色器按钮。

由于该按钮看着闹心，所以对颜色rgba进行了琢磨。用canvas以及其特有的方法写了一款半成品的拾色器。【在线尝试】

这个是有调节亮暗的拾色器，并且应用到了canvas中

之所以说是半成品，是因为：

没添加亮度的改变

很单一，需要根据需求自行改动

在黑白两色上存在偏差，布局不美观

对图片说明

1、正方形区域的高宽的像素为 255px

2、长方形区域的高宽为 50px 和 255px

3、正方形区域的的颜色会随着鼠标点击长方形区域而发生改变

4、矩形区域所用的标签都是canvas标签

遇到的问题

1、如何获取颜色？

通过getImageData()返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据。

2、如如何过渡颜色？

正方形区域由255*225个1*1的小正方形排列构成，每个相连小正方形的填充颜色只有1个数值的变化。

长方形区域由255个1*50的小长方形构成，每个小长方形的填充颜色分别为rgb(0,0,0)→rgb(0,0,255)、rgb(0,0,0)→rgb(0,255,0)、rgb(0,0,0)→rgb(255,0,0)

3、如何确保颜色的全面性？

如图，其实颜色已经发生了重复，只需要一个长方形区域就行了，为了便于操作因此采用三个长方形。

思路

1、通过rgb(r,g,b)以及每个参数的取值范围0~255可以得知，有256*256*256种不同的rgb(r,g,b)

2、可以将(r，g，b)看作一个三维的坐标系(x，y，z),如果所有的颜色都取到，通过三维坐标系呈现的是一个立体的正方形，如果固定参数z的值，那么x,y的值不论如何改变，所呈现的可以看作一块平面(对应图中的正方形)。

3、反过来，x，y的所有取值都排列组合后，只需要动态的改变z的取值，正方形区域也就会跟着动态改变。所以第一块长方形就包含的所有z的取值，而x，y的取值固定为(0，0)

4、为了方便我又创建了其他两块长方形区域。

5、js中的方法思路是，同鼠标点击长方形区域获取某一参数的值，然后为这个参数动态生成一块正方形区域颜色变化。

代码

html代码

js代码

var canvas4=document.getElementById("canvas4")

var canvas5=document.getElementById("canvas5")

var canvas6=document.getElementById("canvas6")

var canvas7=document.getElementById("canvas7")

var cgc4=canvas4.getContext("2d")

var cgc5=canvas5.getContext("2d")

var cgc6=canvas6.getContext("2d")

var cgc7=canvas7.getContext("2d")

//初始化正方形区域的颜色

for(var i=0;i<255;i++){

for(var j=0;j<255;j++){

cgc4.fillStyle="rgb("+j+","+i+",125)";

cgc4.fillRect(i,j,1,1)

}

}

//----------------------

for(var i=0;i<255;i++){

cgc5.fillStyle="rgb(0,0,"+i+")";

cgc5.fillRect(i,0,1,50);

}

//----------------------

for(var i=0;i<255;i++){

cgc6.fillStyle="rgb(0,"+i+",0)";

cgc6.fillRect(i,0,1,50);

}

//----------------------

for(var i=0;i<255;i++){

cgc7.fillStyle="rgb("+i+",0,0)";

cgc7.fillRect(i,0,1,50);

}

//-------------------动态方法

methondOne(canvas5,cgc5,0)

methondOne(canvas6,cgc6,1)

methondOne(canvas7,cgc7,2)

methondOne(canvas4,cgc4,3)

function methondOne(canvas,cgc,flag){

canvas.οnclick=function(e){

var colorData=cgc.getImageData(e.offsetX,e.offsetY,1,1).data

switch(flag){

case 0:methondTow(flag,colorData[2])

break

case 1:methondTow(flag,colorData[1])

break

case 2:methondTow(flag,colorData[0])

break

case 3:

console.log(colorData)

break

}

}

}

function methondTow(flag,k){

console.log(flag+","+k)

switch(flag){

case 0:

for(var i=0;i<255;i++){

for(var j=0;j<255;j++){

cgc4.fillStyle="rgb("+j+","+i+",+"+k+")";

cgc4.fillRect(j,i,1,1)

}

}

break

case 1:

for(var i=0;i<255;i++){

for(var j=0;j<255;j++){

cgc4.fillStyle="rgb("+j+",+"+k+","+i+")";

cgc4.fillRect(j,i,1,1)

}

}

break

case 2:

for(var i=0;i<255;i++){

for(var j=0;j<255;j++){

cgc4.fillStyle="rgb("+k+","+i+",+"+j+")";

cgc4.fillRect(i,j,1,1)

}

}

break

}

}