【实例】【html5】在canvas获取鼠标的坐标
2015-08-09 07:50
627 查看
方法
使用onmousemove来实时获取当前鼠标移动事件,以刷新新的坐标使用canvas.getBoundingClientRect()获取当前画布的位置信息
实现
在线演示<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #canvas { border: thin solid blue; } </style> </head> <body> <p id="message"></p> <canvas id="canvas" width="1200" height="600"></canvas> </body> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); function getLocation(x, y) { var bbox = canvas.getBoundingClientRect(); return { x: (x - bbox.left) * (canvas.width / bbox.width), y: (y - bbox.top) * (canvas.height / bbox.height) /* * 此处不用下面两行是为了防止使用CSS和JS改变了canvas的高宽之后是表面积拉大而实际 * 显示像素不变而造成的坐标获取不准的情况 x: (x - bbox.left), y: (y - bbox.top) */ }; } function drawHorizontalLine(y) { context.beginPath(); context.moveTo(0, y); context.lineTo(canvas.width, y); context.stroke(); context.closePath(); } function drawVerticalLine(x) { context.beginPath(); context.moveTo(x, 0); context.lineTo(x, canvas.height); context.stroke(); context.closePath(); } canvas.onmousemove = function (e) { var location = getLocation(e.clientX, e.clientY); var message = document.getElementById("message"); message.innerHTML = "x=" + location.x + " ,y=" + location.y; context.clearRect(0, 0, canvas.width, canvas.height); drawHorizontalLine(location.y); drawVerticalLine(location.x); }; </script> </html>
值得注意的是:当canvas的表面积和实际显示的像素值不同的时候(如用css把120px*60px的canvas扩大到了1200px*600px,此时显示像素还是120*60,但是canvas的长宽已经变了)
相关文章推荐
- 简单的HTML5在线画板
- HTML5的canvas实现一个球的左右移动
- 手机开发之H5+规范的手机按键处理
- HTML5 数据集属性dataset
- HTML5 canvas 绘制圆形
- HTML5绘制颜色渐变
- html5开发利器——sublimetext2+emmet插件
- HTML5游戏引擎lufylegend深入浅出 - 引擎介绍&原理
- html5 geolocation / 百度地图api Geolocation 定位当前城市信息
- Html5 WebSocket 技术介绍(转载)
- h5视频播放
- html5:article与section元素
- HTML5中新增的Input类型有哪些
- HW Video Acceleration in Chrome/Chromium HTML5 video 视频播放硬件加速
- AnyChart 7.6.0版本发布【附下载】
- razor 添加html5属性
- 使用html5获取当前手机的经纬度,并接入百度地图API,查询出当前位置
- html5 canvas画图
- 详解HTML5中download属性的应用
- html5拖(drag)放(drop)功能