canvas教程

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

字号+ 作者:H5之家 来源:H5之家 2017-11-11 16:00 我要评论( )

function() { var graph = document.getElementById(canvas); if (graph.getContext){ var g = graph.getContext(2d); g.strokeStyle = #000; g.beginPath(); fo

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

<style> #note{position:absolute;display:none;border:solid 1px #000;background:#fff} </style> <canvas></canvas> <div></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>

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 绘制HTMl5 Canvas旋转风车的方法技巧

    绘制HTMl5 Canvas旋转风车的方法技巧

    2017-11-11 17:27

  • HTML5 Canvas实战之刮奖效果

    HTML5 Canvas实战之刮奖效果

    2017-11-11 15:26

  • 如何通过HTMl5 Canvas实现圆形进度条并显示数字百分比效果?

    如何通过HTMl5 Canvas实现圆形进度条并显示数字百分比效果?

    2017-11-11 14:01

  • canvas 视频教程

    canvas 视频教程

    2017-11-11 12:03

网友点评
s