html5 canvas+js刻度尺代码

html5 canvas+js制作的刻度尺代码，有三款样式，代码注释很详细。

分类：html5 > canvas 难易：中级

查看演示下载资源下载积分： 20 积分

js代码

<script src="js/ruler.js"></script>
<script>

    //调用刻度尺方法
    ruler.initPlugin({
        el: "ruler", //容器id
        startValue: 100,
        background: "#f5f5f5",
        success: function (res) {
            console.log(res);
        }
    });

    //调用刻度尺方法
    ruler.initPlugin({
        el: "ruler2", //容器id
        maxScale: 300, //最大刻度
        startValue: 50, //刻度开始的初始值
        region: [10, 200], //选择刻度的区间范围
        background: "#2bd4bc", //刻度尺背景色
        markColor: "#c968ff", //中心刻度标记颜色
        success: function (res) {
            console.log(res);
        }
    });


    var rulerText3 = document.getElementById("rulerText3");
    rulerText3.value = 200;
    //调用刻度尺方法
    ruler.initPlugin({
        el: "ruler3", //容器id
        height: 50, //刻度尺高度
        maxScale: 300, //最大刻度
        startValue: 200, //刻度开始的初始值
        region: [50, 220], //选择刻度的区间范围
        background: "#ffa43c", //刻度尺背景色
        color: "#fff", //刻度线和字体的颜色
        markColor: "#3786db", //中心刻度标记颜色
        isConstant: true, //是否不断地获取值
        success: function (res) {
            console.log(res);
            rulerText3.value = res;
        }
    });

</script>