在用百度熱力圖時，接觸到圖例值域，故抽空做一簡單的例子。
預覽地址：http://bl.ocks.org/chengquan223/raw/5cf20ce2cbc6e1ea3d83/
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>顏色取色器colorPicker</title> <style type="text/css"> html,body{margin:0;padding:0;font-size:12px}#content{margin:20px auto;width:600px;height:300px}.content-left{float:left;width:400px;height:inherit}.content-right{float:left;width:180px;height:inherit;margin-left:18px}.canvas-scale{height:15px;top:25px;padding:0;margin:0;float:left}.canvas-selColor{float:left;width:100%;height:260px;margin-top:10px}#colorCanvas{cursor:crosshair;float:left} </style> </head> <body> <div id="content"> <div class="content-left"> <canvas id="colorCanvas" width="400" height="15"></canvas> <div class="canvas-scale"> <canvas id="rangeCanvas" width="400" height="15"></canvas> </div> <div class="canvas-selColor"></div> </div> <div class="content-right"> <input type="text" id="colorValue" size="10" />值域<br /><br /> <input type="text" id="position" size="10" />canvas坐標<br /><br /> <input type="text" id="rgb" size="10">rgb顏色值<br /><br /> <input type="text" id="color" size="10">16進制顏色碼<br /><br /> </div> </div> </body> </html> <script type="text/javascript"> var colorCanvas = document.getElementById("colorCanvas"); var context = colorCanvas.getContext("2d"); var colorGradient = { 0: 'rgba(100,255,51,1)', 0.167: 'rgba(153,255,51,1)', 0.333: 'rgba(204,255,51,1)', 0.5: 'rgba(255,255,71,0.8)', 0.667: 'rgba(255,250,150,1', 0.833: 'rgba(255,187,102,0.9)', 1: 'rgba(255,119,68,0.9)' }; var sortNumber = function (a, b) { return a - b; }; var Picker = function () { this.range = [50, 100, 150, 200, 300]; this.drawColor = function () { var grad = context.createLinearGradient(0, 0, colorCanvas.width, colorCanvas.height); for (var gradient in colorGradient) { grad.addColorStop(gradient, colorGradient[gradient]); } context.fillStyle = grad; context.fillRect(0, 0, colorCanvas.width, colorCanvas.height); }; this.drawRange = function () { var rangeCanvas = document.getElementById("rangeCanvas"); var width = rangeCanvas.width; var ctx = rangeCanvas.getContext("2d"); var len = this.range.length; var maxValue = this.range.sort(sortNumber)[len - 1];//數組最大value ctx.drawLine = function (beginX, beginY, endX, endY) { this.moveTo(beginX, beginY); this.lineTo(endX, endY); }; ctx.fillText("0", 0, 14); ctx.save(); ctx.translate(0.5, 0.5); //消除鋸齒 ctx.lineWidth = 1; ctx.beginPath(); ctx.drawLine(0, 0, 0, 4); //第一個刻度 for (var i = 0; i < len - 1; i++) { var px = Math.round(width * this.range[i] / maxValue); ctx.fillText(this.range[i], px - 8, 14); ctx.drawLine(px, 0, px, 4); } var endPx = Math.round(width * this.range[len - 1] / maxValue); ctx.fillText(this.range[len - 1], endPx - 18, 14); ctx.drawLine(endPx - 1, 0, endPx - 1, 4); //最后一個刻度 ctx.stroke(); }; this.drawCircle = function (point, color) { context.clearRect(0, 0, colorCanvas.width, colorCanvas.height); this.drawColor(); context.beginPath(); context.arc(point.X, point.Y, 2, 0, 360, false); context.fillStyle = color; context.fill(); context.lineWidth = 1; context.strokeStyle = "#000"; context.stroke(); context.save(); context.closePath(); }; this.d2Hex = function (d) { // Converts a decimal number to a two digit Hex value var hex = Number(d).toString(16); while (hex.length < 2) { hex = "0" + hex; } return hex.toUpperCase(); }; this.getRgbColor = function (point) { var imageData = context.getImageData(0, 0, colorCanvas.width, colorCanvas.height); var data = imageData.data; var i = ((point.Y * colorCanvas.width) + point.X) * 4; var rgb = [], color = '#', objRgbColor = { "rgb": rgb, "color": color }; for (var j = 0; j < 3; j++) { rgb.push(data[i + j]); color += this.d2Hex(data[i + j]); } objRgbColor.color = color; return objRgbColor; }; this.getIntOffset = function (e) { var evt = e || window.event; var srcObj = evt.target || e.srcElement; if (e.offsetX) { return { X: parseInt(e.offsetX), Y: parseInt(e.offsetY) }; } else { var rect = srcObj.getBoundingClientRect(); return { X: parseInt(e.clientX - rect.left), Y: parseInt(e.clientY - rect.top) }; } }; this.getValue = function (point) { return Math.round(this.range[this.range.length - 1] * point.X / colorCanvas.width); }; this.setColor = function (point) { var objRgbColor = this.getRgbColor(point); var rgb = "rgb(" + objRgbColor.rgb.join(",") + ")"; this.drawCircle(point, color); document.getElementsByClassName("canvas-selColor")[0].style.background = rgb; document.getElementById("colorValue").value = this.getValue(point); document.getElementById("position").value = point.X + "," + point.Y; document.getElementById("rgb").value = rgb; document.getElementById("color").value = objRgbColor.color; }; }; var initPicker = function () { var picker = new Picker(); picker.drawColor(); picker.drawRange(); colorCanvas.onclick = function (e) { var point = picker.getIntOffset(e); picker.setColor(point); } } initPicker(); </script>