精华内容
下载资源
问答
  • canvas获取鼠标坐标

    2019-07-30 02:27:53
    如题,废话不多说。 demo截图: 源代码: <html> <head> <title></title> <script> window.onload=function()... var canvas = document.getElementById("demoCanvas")...

    如题,废话不多说。

    demo截图:

    源代码:

    <html>
    <head>
        <title></title>
        <script>
        window.onload=function(){
            var canvas = document.getElementById("demoCanvas");
            var ctx = canvas.getContext("2d");
            var x,y;
    
            canvas.addEventListener("mousemove", function(e){
                var sw = (canvas.style.width.replace(/\px/g, ""))| 0,
                    sh = (canvas.style.height.replace(/\px/g, ""))|0;
    
                if(e.pageX || e.pageY) {
                    x = e.pageX;
                    y = e.pageY;
                }else{
                    x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
                    y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
                }
    
                x -= canvas.offsetLeft;
                y -= canvas.offsetTop;
    
                if(sw) x *= canvas.width / sw;
                if(sh) y *= canvas.height / sh;
                x |= 0;
                y |= 0;
    
                ctx.clearRect(0,0,800,600);
                ctx.fillText("Mouse: X-"+x+",Y-"+y,100,100);
            },false);
        };
        </script>
    </head>
    <body>
        <canvas id="demoCanvas" width="800" height="600" style="background:#66ccdd;"></canvas>
    </body>
    </html>

     

    转载于:https://www.cnblogs.com/joyho/articles/3559049.html

    展开全文
  • canvas绑定事件的时候,获得鼠标点击的地方在canvas画布内的坐标的方法。 var x = event.clientX - canvas.getBoundingClientRect().left; var y = event.clientY - canvas.getBoundingClientRect().top; 复制代码...

    canvas绑定事件的时候,获得鼠标点击的地方在canvas画布内的坐标的方法。

    var x = event.clientX - canvas.getBoundingClientRect().left; 
    var y = event.clientY - canvas.getBoundingClientRect().top;
    复制代码

    详细方法:

    // 监听点击事件
    canvas.addEventListener("click", function(event) {
        getMousePos(canvas, event);
    });
    
    function getMousePos(canvas, event) {
        //1
        var rect = canvas.getBoundingClientRect();
        //2
        var x = event.clientX - rect.left * (canvas.width / rect.width);
        var y = event.clientY - rect.top * (canvas.height / rect.height);
        console.log("x:"+x+",y:"+y);
    }
    
    复制代码

    Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。

    转载于:https://juejin.im/post/5bacf7e0e51d450e98750357

    展开全文
  • 这个需要获取鼠标的坐标值,但是我总感觉坐标获取得不准确,每次我在画布上画出线条的时候,线条总是在光标明显靠下的位置画出来的,而不是从光标的位置开始画线的。如果在画布的下边画线条 根本出不来,可能获取的...

    我想做一个鼠标画线的效果 就是类似window自带的画图板那个画线的功能。这个需要获取鼠标的坐标值,但是我总感觉坐标获取得不准确,每次我在画布上画出线条的时候,线条总是在光标明显靠下的位置画出来的,而不是从光标的位置开始画线的。如果在画布的下边画线条 根本出不来,可能获取的实际坐标值超过了画布的大小了。难道是我获取坐标值的方法不对,想请教大家!

    test

    background: #000;

    }

    var oC = document.getElementById('cav');

    var ctx = oC.getContext('2d');

    oC.onmousedown = function (evt) {

    var x = evt.pageX - oC.offsetLeft;

    var y = evt.pageY - oC.offsetTop;

    ctx.moveTo(x, y);

    oC.onmousemove = function (evt) {

    var x = evt.pageX - oC.offsetLeft;

    var y = evt.pageY - oC.offsetTop;

    ctx.lineTo(x, y);

    ctx.stroke();

    }

    oC.onmouseup = function () {

    oC.onmousemove = null

    }

    }

    }

    展开全文
  • 获取canvas鼠标坐标

    万次阅读 2017-06-01 17:04:41
    获取canvas鼠标坐标

    代码

    // 监听点击事件
    canvas.addEventListener("click", function(event) {
        getMousePos(canvas, event);
    });
    
    function getMousePos(canvas, event) {
        //1
        var rect = canvas.getBoundingClientRect();
        //2
        var x = event.clientX - rect.left * (canvas.width / rect.width);
        var y = event.clientY - rect.top * (canvas.height / rect.height);
        console.log("x:"+x+",y:"+y);
    }

    解析

    getBoundingClientRect()

    这个方法返回的对象有六个属性,如下表:

    属性 描述
    top 元素上边界距窗口最上边的距离
    left 元素左边界距窗口最左边的距离
    bottom 元素下边界距窗口最上边的距离
    right 元素右边界距窗口最左边的距离
    width 元素的宽度
    height 元素的高度

    rect.left * (canvas.width / rect.width)

    之所以要乘一个(canvas.width / rect.width),是为了保证画布的像素值和显示在页面上的尺寸不一致的情况下,也能够正确获取到鼠标相对于canvas中的坐标。

    画布的像素值和显示在页面上的尺寸不一致的情况

    <canvas id="canvasId" width="100" height="100" style="width: 500px;height: 500px;"></canvas>
    展开全文
  • 使用onmousemove来实时获取当前鼠标移动事件,以刷新新的坐标 使用canvas.getBoundingClientRect()获取当前画布的位置信息 实现 在线演示 #canvas { border: thin solid blue; } ...
  • 点击获取canvas内的鼠标坐标位置
  • 圆心为鼠标所在位置,其中圆的位置随着鼠标位置的移动而移动,js代码中mousePos(e)方法用于获取鼠标在整个页面的坐标,getCanvasPos(canvas,e)方法用于获取鼠标canvas上的坐标canvas以其左上角为起点,并设为(0,...
  • var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); canvas.onmousemove = function(e) { var bbox = canvas.getBoundingClientRect(); var x = e.clientX - ...
  • canvas鼠标点击两次获取焦点坐标 function OnCanvas(e) { if(!xaxisFlag &amp;&amp; !yaxisFlag &amp;&amp; !slantFlag){ return; } if(!isEmptyObject(currentStartPoint) &amp;&...
  • body { margin: 0px; padding: 0px; } function writeMessage(canvas, message) { var context = canvas.getContext('2d'...
  • You've got an issue working against you that isn't of your own ... The general rule is when in a turtle canvas, use turtle methods. But turtle doesn't have an inherent 'Motion' event type, so you ...
  • canvas坐标 欢迎大家有好点建议可以提。js高级扣扣群:170798851 欢迎来交流学习  git项目地址:https://github.com/Jonavin/HTML5_Study   /** * Created by wsf on 2014-11-22. * */ ; (function...
  • 求助各位大大: 我在canvas定义了canva_MouseLeftButtonDown(object sender, ...在函数里面获取到的坐标鼠标相对于整个窗口的坐标,而不是canvas里面的, 怎么样才能在这个函数里获取鼠标相对于canvas坐标呢?
  • 明明引用了System.window.input,但是依然使用不了Point p=Mouse.GetPostion(Canvas1); 很奇怪,总是报错说,Mouse不存在 请问大侠们知道是什么问题吗?或者有没有其他的办法获取控件内相对鼠标位置的
  • <html> <head> <style type="text/css">body{ margin: 0; padding: 0; } .my-canvas{ margin: 20px; border:10px solid #c3c3c3; ...
  • 代码很简单就这么一点, 160X160的一个canvas画布,按理鼠标在画布里的时候,下面显示坐标的x,y都在0~160范围内。 单独用浏览器打开这段程序,很正常。 可是放在博客园的博客侧边栏公告里,x倒正常,y却都负了。。...
  • 一般情况一般情况下,如果需要在 canvas获取鼠标指针坐标,可以通过监听鼠标的mousemove(如果只需单击时的坐标,可以用click)事件。 当事件被触发时,我们可以获取鼠标相对于 viewport 的坐标(event.clientX,...
  • You've got an issue working against you that isn't of your own making... The general rule is when in a turtle canvas, use turtle methods. But turtle doesn't have an inherent 'Motion' event type, so yo...
  • 用JavaScript获取鼠标点击时在canvas画布上的坐标,代码如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>demo</title> ...
  • 有了前面的canvas基础之后,现在开始就精彩了,后面写的canvas教程都是属于综合应用,前面已经写了常用的canvas基础知识,参考链接如下: [js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法 [js高手之...
  • 下面附上正确代码,该代码作用是获取canvas鼠标点击的坐标。 <canvas id="myCanvas" width="600" height="600" >canvas> <script type="text/javascript"> var cvs = document.getElementById("myCanvas"); var ...
  • canvas画路径坐标确定

    千次阅读 2013-12-31 19:12:46
    canvas上的坐标鼠标指针的坐标是不一致的,通过鼠标指针获取坐标描点是对的。 解决方法可以通过画格子对坐标进行确定 代码: // $(document).ready(function(){ // var canvas = $('#firstfloor')[0]...

空空如也

空空如也

1 2 3 4 5 ... 8
收藏数 145
精华内容 58
关键字:

canvas获取鼠标坐标