canvas怎么设置鼠标事件?怎么获取里面的点?

function() {

var graph = document.getElementById('canvas');

if (graph.getContext){
var g = graph.getContext('2d');
g.strokeStyle = '#000';
g.beginPath();
for (var i = 0, l = a.length; i < l; i++) {
g.arc((i + 1) * 100,a[i],3,0,Math.PI*2,true);
g.fill();
g.lineTo((i + 1) * 100,a[i]);

}
g.fillStyle="black";
g.stroke();
g.closePath();
图片说明
想做出鼠标滑动到点上时,有一个信息框显示出来,大神们帮我!

3个回答

用这个吧,忘记计算canvas的位置了

 <style>
    #note{position:absolute;display:none;border:solid 1px #000;background:#fff}
</style>
<canvas id="canvas" style="border:solid 1px #000;margin:100px 0 0  100px;" width="1000"></canvas>
<div id="note"></div>
<script>
    var a = [10, 20, 30, 40, 50, 20, 30, 40],note=document.getElementById('note');
    var c = document.getElementById('canvas');
    function getLeftRight(o) {
        var p = { x: o.offsetLeft, y: o.offsetTop };
        while (o = o.offsetParent) { p.x += o.offsetLeft; p.y += o.offsetTop; }
        return p;
    }
    function hitCheck(x, y, point, r) {//检查是否移动到点上,直接按照正方形检查了,圆形比较麻烦
        var x1 = point.x, y1 = point.y;
        return x1 + r > x && x1 - r < x && y1 + r > y && y1 - r < y;
    }
    if (c.getContext) {
        var g = c.getContext('2d');
        var points = [];//原点圆心集合
        var r = 3;//半径
        var cP = getLeftRight(c);//获取canvas对象位置
        for (var i = 0, l = a.length; i < l; i++) {
            points[i] = { x: (i + 1) * 100, y: a[i] };
            g.beginPath();
            g.moveTo(i * 100, i - 1 < 0 ? 0 : a[i - 1]);
            g.lineTo((i + 1) * 100, a[i]);
            g.arc((i + 1) * 100, a[i], r, 0, Math.PI * 2, true);
            g.fill();
            g.stroke();
            g.closePath()
        }
        var timer;
        c.addEventListener('mousemove', function (e) {
            clearTimeout(timer);
            var x = e.clientX, y = e.clientY;
            timer = setTimeout(function () {
                for (var i = 0; i < points.length; i++) 
                    if (hitCheck(x - cP.x, y - cP.y, points[i], r)) {
                        note.style.display = 'block';
                        note.style.left = points[i].x +cP.x+ r + 1 + 'px';
                        note.style.top = points[i].y + cP.y + r + 1 + 'px';
                        note.innerHTML = 'X:' + points[i].x + '  Y:' + points[i].y;
                        return
                    }

                note.style.display = 'none';
            }, 100);
        }, false);
    }
</script>
showbo
支付宝加好友偷能量挖,胡杨等着我的招呼 鼠标移开再绘制原始颜色的点
接近 5 年之前 回复
showbo
支付宝加好友偷能量挖,胡杨等着我的招呼 回复qq_31944539: 这个你自己研究了,重新绘制一个点,设置下填充颜色什么的。。鼠标移开再绘制原始颜色的代拿
接近 5 年之前 回复
qq_31944539
qq_31944539 这个能显示一个提示框,但是鼠标指到点上,那个点能给出反应吗?比如说颜色改变一下。。
接近 5 年之前 回复
qq_31944539
qq_31944539 回复showbo: 不会改啊,你有时间帮我改下吗。。3Q!
接近 5 年之前 回复
showbo
支付宝加好友偷能量挖,胡杨等着我的招呼 回复qq_31944539: 你记录坐标点的位置,移动后获取pageX/pageY进行对比。。
接近 5 年之前 回复
qq_31944539
qq_31944539 回复showbo: 可以给代码吗?上面是折线图的代码,做出:鼠标指到点上时,点的颜色改变,并且在点的旁边显示一个提示框。你帮我改下代码?3Q
接近 5 年之前 回复
showbo
支付宝加好友偷能量挖,胡杨等着我的招呼 回复qq_31944539: 看原来的回复。我里面改过了。有用就采纳了
接近 5 年之前 回复
qq_31944539
qq_31944539 大神,又是你哈!我上个问题还没解决呢,就是这个图,点变实心的问题。g.fill()不行,g.fillStyle="black"也不行
接近 5 年之前 回复
 <style>
    #note{position:absolute;display:none;border:solid 1px #000;background:#fff}
</style>
<canvas id="canvas" width="1000" style="border:solid 1px #000"></canvas>
<div id="note"></div>
<script>
    var a = [10, 20, 30, 40, 50, 20, 30, 40],note=document.getElementById('note');
    var c = document.getElementById('canvas');
    if (c.getContext) {
        var g = c.getContext('2d');
        var points = [];//原点圆心集合
        var r = 3;//半径
        for (var i = 0, l = a.length; i < l; i++) {
            points[i] = { x: (i + 1) * 100, y: a[i] };
            g.beginPath();
            g.moveTo(i * 100, i - 1 < 0 ? 0 : a[i - 1]);
            g.lineTo((i + 1) * 100, a[i]);
            g.arc((i + 1) * 100, a[i], r, 0, Math.PI * 2, true);
            g.fill();
            g.stroke();
            g.closePath()
        }
        function hitCheck(x, y, point,r) {//检查是否移动到点上,直接按照正方形检查了,圆形比较麻烦
            var x1 = point.x, y1 = point.y;
            return x1 + r > x && x1 - r < x && y1 + r > y && y1 - r < y;
        }
        var timer;
        c.addEventListener('mousemove', function (e) {
            clearTimeout(timer);
            var x = e.clientX, y = e.clientY;
            timer = setTimeout(function () {
                for (var i = 0; i < points.length; i++) 
                    if (hitCheck(x, y, points[i], r)) {
                        note.style.display = 'block';
                        note.style.left = points[i].x + r + 1 + 'px';
                        note.style.top = points[i].y + r + 1 + 'px';
                        note.innerHTML ='X:'+ points[i].x + '  Y:' + points[i].y;
                        return
                    }

                note.style.display = 'none';
            }, 100);
        }, false);
    }
</script>
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐