js刻度尺插件_JS鼠标拖动刻度标尺（尺子）效果

这两天项目需要一个优先级刻度线，并且带鼠标拖动 值变换。网上搜了一下，发现没有符合要求的，想想自己写了一个，喜欢的朋友可以收藏起来，万一以后还用的着呢！

下面直接代码演示：html>

var myCanvas = document.getElementById("scaleLine"), ctx = myCanvas.getContext("2d");

var w = 420, h = 60, x, y, ax, ay;

//画刻度线,刻度值

function draw() {

ctx.clearRect(0, 0, 450, h);

var max = parseInt(9), min = parseInt(1);

var ratio = (max - min) / 400;    //0.02

var tickSize = 50, tickCnt = 9;

var unit = tickSize * ratio;    //1

ctx.beginPath();

ctx.moveTo(20, 30);

ctx.lineTo(w, 30);

for (var i = 0; i 

ctx.moveTo(20 + tickSize * i, 35);

ctx.lineTo(20 + tickSize * i, 25);

ctx.textAlign = 'center';

ctx.fillText((min + unit * i), 20 + tickSize * i, 20);

<