HTML5 canvas标签－4 灰度直方图的实现

function getHistogram(imgData){
//先灰度化
var data = imgData,detailArr = [],heightOfCanvas = 500;
for (var i=0;i<256;i++){
detailArr.push(0);
}
for (var i=0;i<canvas.width;i++){
for (var j=0;j<canvas.height;j++){
var currentPixel = 4*canvas.width*j + 4* i,
r = data.data[currentPixel],
g = data.data[currentPixel+1],
b = data.data[currentPixel+2],
gray = 0.3*r+0.59*g+0.11*b;
detailArr[Math.floor(gray)]+=1;
}
}
var biggestNum = 0,heightOfEach = 0;
for (var i=0;i<detailArr.length;i++){
(biggestNum<detailArr[i])?biggestNum=detailArr[i]:"";
}
heightOfEach = heightOfCanvas/biggestNum;
histogramCtx.moveTo(0,heightOfCanvas);
histogramCtx.strokeStyle = 'black';
for (var i=0;i<detailArr.length;i++){
histogramCtx.lineTo(1+i*2,heightOfCanvas-(heightOfEach*detailArr[i]));
}
histogramCtx.lineTo(514,heightOfCanvas);
histogramCtx.lineTo(0,heightOfCanvas);
histogramCtx.fillStyle = "black";
histogramCtx.stroke();
histogramCtx.fill();
histogramCtx.closePath();
}