目前粗糙了寫了一個像素繪圖的網頁颁井，畫筆的顏色rgba的值取自html5中input標簽自帶的一個color類型的拾色器按鈕倦炒。
由于該按鈕看著鬧心履怯，所以對顏色rgba進行了琢磨耕姊。用canvas以及其特有的方法寫了一款半成品的拾色器蛆橡≡驶【在線嘗試】
這個是有調節(jié)亮暗的拾色器萍肆，并且應用到了canvas中
之所以說是半成品果港，是因為：
- 沒添加亮度的改變
- 很單一削罩，需要根據(jù)需求自行改動
- 在黑白兩色上存在偏差瞄勾，布局不美觀
對圖片說明
1、正方形區(qū)域的高寬的像素為 255px
2弥激、長方形區(qū)域的高寬為 50px 和 255px
3进陡、正方形區(qū)域的的顏色會隨著鼠標點擊長方形區(qū)域而發(fā)生改變
4、矩形區(qū)域所用的標簽都是canvas標簽
遇到的問題
1微服、如何獲取顏色趾疚？
通過getImageData()返回 ImageData 對象，該對象為畫布上指定的矩形復制像素數(shù)據(jù)以蕴。
2糙麦、如如何過渡顏色？
正方形區(qū)域由255*225個1*1的小正方形排列構成丛肮，每個相連小正方形的填充顏色只有1個數(shù)值的變化赡磅。
長方形區(qū)域由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、如何確保顏色的全面性习劫？
如圖咆瘟，其實顏色已經發(fā)生了重復，只需要一個長方形區(qū)域就行了诽里，為了便于操作因此采用三個長方形搞疗。
思路
1、通過
rgb(r,g,b)以及每個參數(shù)的取值范圍0~255可以得知，有256*256*256種不同的rgb(r,g,b)
2匿乃、可以將（r，g豌汇，b）看作一個三維的坐標系（x幢炸，y，z）,如果所有的顏色都取到拒贱，通過三維坐標系呈現(xiàn)的是一個立體的正方形宛徊，如果固定參數(shù)z的值，那么x,y的值不論如何改變逻澳，所呈現(xiàn)的可以看作一塊平面（對應圖中的正方形）闸天。
3、反過來斜做，x苞氮，y的所有取值都排列組合后，只需要動態(tài)的改變z的取值瓤逼，正方形區(qū)域也就會跟著動態(tài)改變笼吟。所以第一塊長方形就包含的所有z的取值，而x霸旗，y的取值固定為（0贷帮，0）
4、為了方便我又創(chuàng)建了其他兩塊長方形區(qū)域诱告。
5撵枢、js中的方法思路是，同鼠標點擊長方形區(qū)域獲取某一參數(shù)的值精居，然后為這個參數(shù)動態(tài)生成一塊正方形區(qū)域顏色變化锄禽。
代碼
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")
//初始化正方形區(qū)域的顏色
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);
}
//-------------------動態(tài)方法
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>
