目前粗糙了写了一个像素绘图的网页，画笔的颜色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代码
<body style="background-color: #ffffff;">
<canvas width="255" height="255" id="canvas4" style="margin-top: 20px;"></canvas>
<canvas width="255" height="50px" id="canvas5" style="margin-top: 20px;"></canvas>
<canvas width="255" height="50px" id="canvas6" style="margin-top: 20px;"></canvas>
<canvas width="255" height="50px" id="canvas7" style="margin-top: 20px;"></canvas>
</body>
js代码
<script type="text/javascript">
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.onclick=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
}
}
</script>
