鼠标移动刻度线,刻度标识

这两天项目需要一个优先级刻度线,并且带鼠标拖动 值变换。度娘了下,发现没有符合要求的,想想自己写了一个,放在这,万一以后还用的着呢!
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滑动刻度线</title>
</head>
<body onload="init()">
<div>
    <canvas id="scaleLine" width=450 height=60 style="border:1px solid grey;"></canvas>
</div>

<script>
    var myCanvas = document.getElementById("scaleLine"),ctx = myCanvas.getContext("2d");
    var w = 420,h = 60,x,y,ax,ay;

    //画刻度线,刻度值
    function draw() {
        ctx.clearRect(0,450var 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,30for (var i = 0; i < tickCnt; 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);
            ctx.fillStyle = 'green';
        }
        ctx.stroke();
        ctx.closePath();
    }

    画标识圆圈
     drawArc(x,y) {
        ctx.beginPath();
        ctx.lineWidth = 2;
        ctx.arc(x,5,0 * Math.PI,2 * Math.PI);
        ctx.fillStyle = "red"
        ctx.fill();
        ctx.stroke();
        ctx.closePath();
    };

    事件绑定,鼠标按下
    myCanvas.onmousedown =  (e) {
        事件绑定,鼠标移动
        myCanvas.onmousemove =  (e) {
            x = e.offsetX;
            y = e.offsetY;
            if (x < 20) {   限定X方向移动位置,只能在刻度线上移动
                ax = 20
            } else if (x > 420) {
                ax = 420
            }
            (x < 420 && x > 20) ? x = e.offsetX : x = ax;
            y = 30;     Y方向坐标值限定,只能在刻度线上移动

            先清除之前图像,然后重新绘制
            ctx.clearRect(0,0事件绑定,鼠标松开。同时清除myCanvas绑定事件
        myCanvas.onmouseup =  () {
            myCanvas.onmousemove = null;
            myCanvas.onmouseup = ;
        };
    }

    页面加载完成,初始化方法
     init() {
        draw()
        drawArc(20,1)">);
    }
</script>
</body>
</html>

效果图很简单!

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)