js刻度尺插件_canvas生成刻度尺

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 <= t