js鼠标如何锁定鼠标移动范围

jsbuzhidao 2018-03-17 07:59:55



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        canvas{

            background: #aaaaaa;

            margin: 50px;;

        }

    </style>

</head>

<body >

<canvas  id="canvas" width="300" height="300"></canvas>

</body>

</html>

<script>

    window.onload = function(e) {

        var canvas =document.getElementById('canvas'),

        ctx = canvas.getContext('2d');

        var m_bMouseDown = false;

        var m_ptMouseDown = {};  //鼠标按下的位置

        var m_ptMousePos = {};   //鼠标当前的位置

        //按下

        canvas.onmousedown = function(e) {

            m_bMouseDown = true;

            var point = ClientToScreen(canvas, e.clientX, e.clientY);

            m_ptMouseDown = point;

        }

        //抬起

        canvas.onmouseup = function(e) {

            m_bMouseDown = false;

        }

       //鼠标移动到画布外放开鼠标，

       document.onmouseup = function(e) {

            m_bMouseDown = false;

        }

        //移动

        canvas.onmousemove = function(e) {

            if(m_bMouseDown){

                ctx.clearRect(0, 0, canvas.width, canvas.height);

                var point = ClientToScreen(canvas, e.clientX, e.clientY);

                m_ptMousePos = point;

                var left = Math.min(m_ptMouseDown.x, m_ptMousePos.x),

                right = Math.max(m_ptMouseDown.x, m_ptMousePos.x),

                top = Math.min(m_ptMouseDown.y, m_ptMousePos.y),

                bottom = Math.max(m_ptMouseDown.y, m_ptMousePos.y);

                ctx.beginPath();

                ctx.moveTo(left, top);

                ctx.lineTo(right, top)

                ctx.lineTo(right, bottom)

                ctx.lineTo(left, bottom)

                ctx.lineTo(left, top)

                ctx.strokeStyle = 'red';

                ctx.lineWidth = 2;

                ctx.closePath();

                ctx.stroke();

            }

        }

        function ClientToScreen(canvas, x, y){

            var rect = canvas.getBoundingClientRect();

            return {

                x: x - rect.left * (canvas.width / rect.width),

                y: y - rect.top * (canvas.height / rect.height)

            };

        }

    }

</script>

这是简单的鼠标拖动画一个矩形的效果，请问按住鼠标拖动的时候,如何限制在canvas内呢，即不让鼠标移动到画布范围外.
如鼠标移动到外面放开，除document.onmouseup外，还有其他方法吗
谢谢

...全文

939 3 打赏收藏举报

写回复

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

天际的海浪 2018-03-18

打赏
举报

引用 2 楼 jsbuzhidao 的回复:

[quote=引用 1 楼 showbo 的回复:] onmousemove的时候判断在你的范围内在绘制图片不就好了，限制鼠标移动范围是不可能的

你好，通过这计算是可以达到效果，但是我看C++好像有可以锁定鼠标的，就是在范围内鼠标不松开都移动不出去所以想问下有没有大牛有什么方法或插件可用的 [/quote] C++可以锁定鼠标，是因为C++做出来的是真正的应用程序，应用程序的权限非常高，几乎什么都可以做。但浏览器中的html页面有很多安全限制，不要和真正的应用程序比。

jsbuzhidao 2018-03-17