ruler.js
$.fn.ruler = function(opt) {
var _default = {
width:400,
height:70,
min:0,
max:20,
step:1
}
var settings = $.extend({},_default,opt);
var _canvasW = $(this).width(),
_canvasH = $(this).height();

var myCanvas = document.getElementById($(this).find("canvas").eq(0).attr("id"));
myCanvas.width = _canvasW +25;
myCanvas.height = _canvasH;
var ctx = myCanvas.getContext("2d");
ctx.font="12px Microsoft Yahei";

//上邊的遮罩
var myCanvas2 = document.getElementById($(this).find("canvas").eq(1).attr("id"));
myCanvas2.width = _canvasW +25;
myCanvas2.height = _canvasH;
var ctx2 = myCanvas2.getContext("2d");
ctx2.font="12px Microsoft Yahei";


ctx.clearRect(0, 0, _canvasW, _canvasH);
var diff = settings.max -settings.min;
if(settings.step < 1) {
diff = diff.toFixed(1) * 10;
}else {
diff = diff / settings.step;
}
var ratio = diff / _canvasW;
var tickSize = _canvasW / diff;
var tickCnt = Math.ceil(_canvasW / tickSize);
var x_h_pos = _canvasH/2 + 3;
ctx.moveTo(10, x_h_pos);
ctx.lineTo(_canvasW + 10, x_h_pos);
for (var i = 0; i <= tickCnt; i++) {
var lh = 5;
if(settings.step > 1) {
if(i % (10 / settings.step) == 0) {
lh=12;
}
}else {
if(i % 10 == 0) {
lh=12;

}
}
ctx.moveTo(10 + tickSize * i, x_h_pos);
ctx.lineTo(10 + tickSize * i, x_h_pos-lh);
ctx.textAlign = ‘center‘;

if(settings.step >= 1) {
if( i % (10 / settings.step) == 0 ) {
ctx.fillText((settings.min + settings.step * i), 10 + tickSize * i, 70);
}

} else {
if(i % 10 == 0) {
ctx.fillText((settings.min + 0.1 * i).toFixed(1), 10 + tickSize * i, 70);

}

}

}
if(!!settings.person) {
if(settings.step >= 1) {
for(var j = 0 ; j<settings.person.length;j++) {
var x = (settings.person[j].num - settings.min)*tickSize + 10 ;
ctx.moveTo(x ,x_h_pos);
ctx.lineTo(x , x_h_pos-30);

if(!isLowerIE()) {
(function(obj,pos_x){
var img = new Image();
img.src = obj.src;
img.onload = function() {
ctx.drawImage(img,pos_x-7,x_h_pos-30);
}

})(settings.person[j],x)
ctx.fillText(settings.person[j].num,x,x_h_pos - 35);
}else{
(function(obj,pos_x){
ctx.fillText(obj.txt,pos_x,x_h_pos-30);
})(settings.person[j],x)
ctx.fillText(settings.person[j].num,x,x_h_pos - 40);
}
}
ctx2.fillStyle=‘black‘;
ctx2.globalAlpha=.2;
ctx2.fillRect((settings.person[0].num - settings.min)*tickSize+ 10,x_h_pos-24,(settings.person[2].num - settings.person[0].num)*tickSize,x_h_pos - 28);
}else{
for(var j = 0 ; j<settings.person.length;j++) {
var x = (settings.person[j].num - settings.min)*tickSize*10 + 10;
ctx.moveTo(x ,x_h_pos);
ctx.lineTo(x , x_h_pos-30);

if(!isLowerIE()) {
(function(obj,pos_x){
var img = new Image();
img.src = obj.src;
img.onload = function() {
ctx.drawImage(img,pos_x-7,x_h_pos-30);
}
})(settings.person[j],x)

ctx.fillText(settings.person[j].num.toFixed(1),x,x_h_pos - 35);
}else{
(function(obj,pos_x){
ctx.fillText(obj.txt,pos_x,x_h_pos-30);
})(settings.person[j],x)
ctx.fillText(settings.person[j].num.toFixed(1),x,x_h_pos - 40);
}
}
ctx2.fillStyle=‘black‘;
ctx2.globalAlpha=.2;
ctx2.fillRect((settings.person[0].num - settings.min)*tickSize*10+ 10,x_h_pos-24,(settings.person[2].num - settings.person[0].num)*tickSize*10,x_h_pos - 28);
}

}
if(!!settings.orgs) {
if(settings.step>=1) {
for(var j = 0 ; j<settings.orgs.length;j++) {
var x = (settings.orgs[j].num - settings.min)*tickSize + 10;
ctx.moveTo(x, x_h_pos);
ctx.lineTo(x, x_h_pos + 25);
if(!isLowerIE()) {
(function(obj,pos_x){
var img = new Image();
img.src = obj.src;
img.onload = function() {
ctx.drawImage(img,pos_x-7,x_h_pos + 25);
}
})(settings.orgs[j],x)
ctx.fillText(settings.orgs[j].num,x,x_h_pos + 42);
}else{
(function(obj,pos_x){
ctx.fillText(obj.txt,pos_x,x_h_pos + 37);
})(settings.orgs[j],x)
ctx.fillText(settings.orgs[j].num,x,x_h_pos + 47);
}
}
ctx2.fillStyle=‘black‘;
ctx2.globalAlpha=.1;
ctx2.fillRect((settings.orgs[0].num - settings.min)*tickSize+ 10,x_h_pos,(settings.orgs[2].num - settings.orgs[0].num)*tickSize,x_h_pos - 30);
}else{
for(var j = 0 ; j<settings.orgs.length;j++) {
var x = (settings.orgs[j].num - settings.min)*tickSize*10 + 10;
ctx.moveTo(x, x_h_pos);
ctx.lineTo(x, x_h_pos + 25);
if(!isLowerIE()) {
(function(obj,pos_x){
var img = new Image();
img.src = obj.src;
img.onload = function() {
ctx.drawImage(img,pos_x-7,x_h_pos + 25);
}

})(settings.orgs[j],x)
ctx.fillText(settings.orgs[j].num.toFixed(1),x,x_h_pos + 42);
}else{
(function(obj,pos_x){
ctx.fillText(obj.txt,pos_x,x_h_pos + 37);
})(settings.orgs[j],x)
ctx.fillText(settings.orgs[j].num.toFixed(1),x,x_h_pos + 47);
}

}
ctx2.fillStyle=‘black‘;
ctx2.globalAlpha=.1;
ctx2.fillRect((settings.orgs[0].num - settings.min)*tickSize*10 + 10,x_h_pos,(settings.orgs[2].num - settings.orgs[0].num)*tickSize*10 ,x_h_pos - 30);
}

}
ctx.stroke();


function isLowerIE() {
var userAgent = navigator.userAgent;
var isOpera = userAgent.indexOf("Opera") > -1;
if (userAgent.indexOf("Trident") > -1 && !isOpera) {
var browser = navigator.appName;
var b_version = navigator.appVersion;
var version = b_version.split(";");
var trim_Version = version[1].replace(/[ ]/g, "");
if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE6.0") {
return true;
}
else if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE7.0") {
return true;
}
else if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE8.0") {
return true
}else{
return false;
}
}else{
return false;
}
}
}

//為了兼容IE8 canvas必須定義在頁面內，不能動態創建

//結構

<span class="rulers" data-person="[3.2,4.0,5.8]" data-orgs="[4.0,6.0,8.0]">
<canvas id="container_ruler"></canvas>
<canvas id="container_mark"></canvas>
</span>

//為了兼容IE8引入excanvas.js

canvas生成刻度尺