canvas之鼠标事件

ゝ一世哀愁。 2022-08-13 04:28 806阅读 0赞

canvas的鼠标事件无法直接获取鼠标在canvas上的坐标，所获得的坐标是相对于整个屏幕的坐标，所以，想得到鼠标在canvas上的坐标时，就必须进行转换。

使用getBoundingClientRect方法，得到canvas在屏幕上的位置及大小信息：

ClientRect {height: 300, width: 1350, left: 8, bottom: 486, right: 1358…}
    bottom: 486
    height: 300
    left: 8
    right: 1358
    top: 186
    width: 1350
    __proto__: ClientRect

通过当前鼠标的坐标和ClientRect的信息对比，得出鼠标在canvas上的位置：

function getPointOnCanvas(canvas, x, y) { 
    			var bbox =canvas.getBoundingClientRect(); 
    			return { x: Math.round((x- bbox.left )*(canvas.width / bbox.width)), 
    					 y: Math.round((y - bbox.top) * (canvas.height / bbox.height)) 
    			}; 
    		}

demo的源代码如下：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>鼠标事件</title>
    <style type="text/css">
    	
    </style>
    </head>
    <body>
    <p>演示canvas的鼠标事件</p>
    <p>Canvas上鼠标事件中不能直接获取鼠标在Canvas的坐标，所获取的都是基于整个屏幕的坐标</p>
    <p id="m">MOVE 鼠标坐标:</p>
    <p id="d">DOWN 鼠标坐标:</p>
    <p id="u">UP 鼠标坐标:</p>
    <canvas id="canvas" width="100%" height="300px" style="width: 100%;height: 300px;"></canvas>
    <script type="text/javascript">
    	window.onload = function(){
    		var c = document.getElementById("canvas");
    		var m =document.getElementById("m");
    		var d =document.getElementById("d");
    		var u =document.getElementById("u");
    		
    		var ctx = c.getContext("2d");
    		c.width = window.innerWidth;
    		ctx.beginPath();
    		//画出canvas的边框
    		ctx.rect(0,0,c.width,300);
    		ctx.stroke();
    		//画一条线
    		ctx.beginPath();
    		ctx.moveTo(0,0);
    		ctx.lineTo(1366,300);
    		ctx.lineWidth = 1;
    		ctx.strokeStyle = "red";
    		ctx.stroke();
    		//添加监听
    		c.addEventListener("mousemove",move,false);
    		c.addEventListener("mousedown",down,false);
    		c.addEventListener("mouseup",up,false);
    		
    		
    		function move(e){
    			m.textContent = "MOVE 鼠标坐标：" + e.pageX + "," + e.pageY + " --canvas坐标：" + getPointOnCanvas(c,e.pageX,e.pageY).x + "," + getPointOnCanvas(c,e.pageX,e.pageY).y;
    		}
    		function down(e){
    			d.textContent = "DOWN 鼠标坐标：" + e.pageX + "," + e.pageY;
    		}
    		function up(e){
    			u.textContent = "UP 鼠标坐标：" + e.pageX + "," + e.pageY;
    		}
    		function getPointOnCanvas(canvas, x, y) { 
    			var bbox =canvas.getBoundingClientRect(); 
    			return { x: Math.round((x- bbox.left )*(canvas.width / bbox.width)), 
    					 y: Math.round((y - bbox.top) * (canvas.height / bbox.height)) 
    			}; 
    		} 
    	}
    	
    </script>
    </body>
    </html>

效果图如：

![pp][]

[pp]: /images/20220810/448300a61ab74edba4723eaff696c899.png