使用JavaScript和Canvas的ColorPicker實現

我試圖使用Canvas實現ColorPicker只是爲了好玩。但我似乎失去了。因爲我的瀏覽器在加載時由於所有這些循環而凍結了一段時間。我加入這個腳本的結果的截圖： enter image description here
使用JavaScript和Canvas的ColorPicker實現

 

window.onload = function(){ 
    colorPicker(); 
} 

function colorPicker(){ 
    var canvas = document.getElementById("colDisp"), 
    frame = canvas.getContext("2d"); 

var r=0, 
g=0, 
b= 0; 

function drawColor(){ 
    for(r=0;r<255;r++){ 
     for(g=0;g<255;g++){ 
     for(b=0;b<255;b++){ 
      frame.fillStyle="rgb("+r+","+g+","+b+")"; 
      frame.fillRect(r,g,1,1); 
     } 
     } 
    } 
} 
drawColor();

目前，我只想要一個關於凍結問題，更好的算法求解，它不是顯示黑色和灰色的顏色。請別人幫我。

來源

2014-03-25 dragfire

你能提供一個jsfiddle鏈接與你所做的一切嗎？ – micnic

嗨@micnic這裏的codepen鏈接：http：//cdpn.io/Ebghn – dragfire

不是每個像素都調用fillRect，而是使用原始RGBA緩衝區可能效率更高。您可以使用context.getImageData獲取一個，使用顏色值填充它，然後使用context.putImageData一次性將其放回。

請注意，您當前的代碼覆蓋每個單個像素255次，每個可能的藍色值一次。每個像素的最終傳遞是255藍色，所以在輸出中看不到灰色和黑色。

尋找一種將所有可能的RGB值映射到二維圖像的好方法並不是微不足道的，因爲RGB是一個三維色彩空間。這樣做有很多策略，但沒有一個對任何可能的用例都是最佳的。您可以在AllRGB.com上找到針對此問題的一些創造性解決方案。其中一些可能適用於某些使用情況下的顏色選擇器。

來源

2014-03-25 14:44:03 Philipp

我不明白...當沒有來源獲得各自的rgb值時，你將如何使用getImageData（）？ – dragfire

@LucyJaa當你在一個空白的畫布上做的時候，你會得到0，0，0，0的RGBA值（別忘了把alpha值設置爲255或者結果是透明的）。或者，您可以使用createImageData創建一些空白圖像數據。 – Philipp

長的路要走，使用.createImageData()：

window.onload = function() { 

    var canvas = document.getElementById("colDisp"); 
    var frame = canvas.getContext("2d"); 
    var width = canvas.width; 
    var height = canvas.height; 
    var imagedata = frame.createImageData(width, height); 

    var index, x, y; 

    for (x = 0; x < width; x++) { 
     for (y = 0; y < height; y++) { 
      index = (x * width + y) * 4; 

      imagedata.data[index + 0] = x; 
      imagedata.data[index + 1] = y; 
      imagedata.data[index + 2] = x + y - 255; 
      imagedata.data[index + 3] = 255; 
     } 
    } 

    frame.putImageData(imagedata, 0, 0); 
};

http://codepen.io/anon/pen/vGcaF

來源

2014-03-25 15:44:49 micnic

請解釋這一行index =（y * 255 + x）* 4; @micnic – dragfire

還有一個疑問...如果我改變畫布的寬度和高度，會影響結果嗎？ – dragfire

'形象。data'是一個帶有'rgba'值的單維數組，你必須從x和y座標獲取和索引變換，以便不會有任何畫布維度問題我更新了我的答案 – micnic

如果你想在鼠標下獲取像素的RGBA，你必須使用context.getImageData。

getImageData返回一個像素數組。

var pixeldata=context.getImageData(0,0,canvas.width,canvas.height);

每個像素由4個連續的數組元素定義。

所以，如果你已經得到了與getImageData像素陣列：

// first pixel defined by the first 4 pixel array elements 

pixeldata[0] = red component of pixel#1 
pixeldata[1] = green component of pixel#1 
pixeldata[2] = blue component of pixel#1 
pixeldata[4] = alpha (opacity) component of pixel#1 

// second pixel defined by the next 4 pixel array elements 


pixeldata[5] = red component of pixel#2 
pixeldata[6] = green component of pixel#2 
pixeldata[7] = blue component of pixel#2 
pixeldata[8] = alpha (opacity) component of pixel#2

所以，如果你有一個mouseX和mouseY的，那麼你可以得到的R，G，B，鼠標這樣的下一個值：

// get the offset in the array where mouseX,mouseY begin 

var offset=(imageWidth*mouseY+mouseX)*4; 

// read the red,blue,green and alpha values of that pixel 

var red = pixeldata[offset]; 
var green = pixeldata[offset+1]; 
var blue = pixeldata[offset+2]; 
var alpha = pixeldata[offset+3];

下面是鼠標下繪製在畫布上colorwheel並顯示RGBA演示：

http://jsfiddle.net/m1erickson/94BAQ/

來源

2014-03-25 16:47:38 markE

棒極了！ Muchos，muchos gracias！我真的很喜歡jsfiddle的迴應，他們節省了很多時間搜索回覆。 –

使用JavaScript和Canvas的ColorPicker實現

回答

相關問題