简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 关于canvas中获取鼠标坐标的问题
过去多啦不再A梦
过去多啦不再A梦 2017-05-19 10:29:32
0
1
565

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style> body {
        background: #000;
    } </style>
    <script> window.onload = function () {
        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
            }
        }
    } </script>
</head>
<body>
<canvas id="cav" style="width: 400px;height: 400px;background: white"></canvas>
</body>
</html>
过去多啦不再A梦
过去多啦不再A梦

全部回复(1)
我想大声告诉你
我想大声告诉你2017-05-19 10:31:32 1 楼 
<canvas id="cav" style="width: 400px;height: 400px;background: white"></canvas>

换成

<canvas id="cav" width="400" height="400" style="background: white"></canvas>

canvas标签的width和height以及style.width和style.height的区别

点赞 +0
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！