欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

显示鼠标滑动轨迹

程序员文章站 2022-06-27 22:22:46
``` Tracks 在第一排的方块中滑动鼠标 重置 ``` ......
<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>tracks</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
        }

        .track-monitor {

            background-color: chocolate;
        }

        .track-pad {

            height: 200px;
            background-color: dimgray;
        }

        .track-coordinate {

            background-color: purple;
            color: white;
            height: 25px;
            line-height: 25px;
            font-size: 12px;
        }

        .track-coordinate-list {
            font-size: 12px;
            width: 100%;
            word-break: break-word;
        }
    </style>
    <script>
        window.addeventlistener('load', function () {
            var pad = document.getelementsbyclassname('track-pad')[0];
            var monitor = document.getelementsbyclassname('track-monitor')[0];
            var coordinate = document.getelementsbyclassname('track-coordinate')[0];
            var clist = document.getelementsbyclassname('track-coordinate-list')[0];
            var reset = document.getelementsbytagname('button')[0];
            var context = monitor.getcontext('2d');
            var cset = [];
            var startx = 0, starty = 0;
            $('div').mousedown(mousestate).mouseup(mousestate);

            function fixsize() {
                monitor.width = window.innerwidth;
            };

            function log(e) {
                if (cset.length == 0) {
                    context.moveto(e.x, e.y);
                } else {
                    context.strokestyle = 'white';
                    context.lineto(e.x, e.y);
                    context.stroke();
                }
                if (e.x - startx == e.x && e.y - starty == e.y) {
                    startx = e.x;
                    starty = e.y;
                }
                coordinate.innerhtml = '(' + (e.x - startx) + ', ' + (e.y - starty) + ')';
                cset.push(coordinate.innerhtml);
                clist.innerhtml = cset.join(', ');
            }

            function mousestate(e) {
                if (e.type == "mouseup") {
                    $('#logs').append('<br/>' + cset.join(', '));
                    clist.innerhtml = cset.join('');
                    cset = [];
                    pad.removeeventlistener("mousemove", log);
                }
                if (e.type == "mousedown") {
                    startx = 0;
                    starty = 0;
                    pad.addeventlistener('mousemove', log);
                }
            }

            reset.addeventlistener('click', function () {
                fixsize();
                cset = [];
                clist.innerhtml = '';
                coordinate.innerhtml = '在第一排的方块中滑动鼠标';
            });

            fixsize();
        });
    </script>
</head>
<body>
<div class="stage">
    <div class="track-pad"></div>
    <canvas width="100" height="200" class="track-monitor"></canvas>
    <div class="track-coordinate">在第一排的方块中滑动鼠标</div>
    <button>重置</button>
    <div>
        <div id="logs"></div>
        <div class="track-coordinate-list"></div>
    </div>
</div>
</body>
</html>




上一篇： OpenCV:图像的裁剪

下一篇： Python进阶:metaclass谈

推荐阅读