Html Canvas注册鼠标事件

淩亂°似流年 2022-05-29 02:15 239阅读 0赞

Canvas鼠标事件有以下几个：

*  mousedown 鼠标按下  
    
 *  mouseup 鼠标离开屏幕
 *  mousemove 鼠标移动  
    
 *  mouseout 鼠标离开当前Canvas界面

下面getLocation方法获取鼠标点击的坐标。

<%--
      Created by IntelliJ IDEA.
      User: wzj
      Date: 2016/10/8
      Time: 21:24
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>Index</title>
    </head>
    <body>
    
        <canvas id="canvas" style="border: 1px solid red;"></canvas>
    </body>
    </html>
    <script>
    
        var canvas = document.getElementById('canvas')
                , g = canvas.getContext('2d')
    
        //注册事件
        canvas.addEventListener("mousedown",doMouseDown,false);
        canvas.addEventListener("mouseup",doMouseUp,false);
        canvas.addEventListener("mousemove",doMouseMove,false);
        canvas.addEventListener("mouseout",doMouseOut,false);
    
        //鼠标按下响应事件
        function mousedown(event) {
            var x = event.pageX;
            var y = event.pageY;
    
            var loc = getLocation(x,y)
        }
    
        function doMouseUp(event) {
            var x = event.pageX;
            var y = event.pageY;
    
            var loc = getLocation(x,y)
        }
        function doMouseMove(event) {
            var x = event.pageX;
            var y = event.pageY;
    
            var loc = getLocation(x,y)
        }
        function doMouseOut(event) {
            var x = event.pageX;
            var y = event.pageY;
    
            var loc = getLocation(x,y)
        }
    
        //获取当前鼠标点击的坐标
        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)
            };
        }
    
    </script>