2013-07-03 31 views
3

我需要在畫布中選擇特定顏色並獲取該顏色的RGB值。 任何人都可以幫助我做到這一點?如何獲得混合顏色的RGB值?

下面是使用jQuery爲canvas

var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 
var grd=ctx.createLinearGradient(0,0,200,0); 
grd.addColorStop(0,"red"); 
grd.addColorStop(0.15,"yellow"); 
grd.addColorStop(0.3,"green"); 
grd.addColorStop(0.45,"aqua"); 
grd.addColorStop(0.6,"blue"); 
grd.addColorStop(0.7,"fuchsia"); 
grd.addColorStop(1,"red"); 

回答

1

代碼:

// utility function to retrieve click position inside the canvas 
function findPos(obj) { 
    var curleft = 0, curtop = 0; 
    if (obj.offsetParent) { 
     do { 
      curleft += obj.offsetLeft; 
      curtop += obj.offsetTop; 
     } while (obj = obj.offsetParent); 
     return { x: curleft, y: curtop }; 
    } 
    return undefined; 
} 

$('#myCanvas').click(function(e) { 
    var pos = findPos(this); 
    var x = e.pageX - pos.x; 
    var y = e.pageY - pos.y; 
    var coord = "x=" + x + ", y=" + y; 
    var c = this.getContext('2d'); 
    var p = c.getImageData(x, y, 1, 1).data; // get 1x1 pixels area at the (x,y) position 
    var red_value = p[0]; 
    var green_value = p[1]; 
    var blue_value = p[2]; 
}); 
+1

只要把你的代碼在一個小提琴:http://jsfiddle.net/WrEMA/8/ –

+0

很好,謝謝。我對jsFiddle還不是很熟悉! – Ricola3D