您现在的位置：首页 >> 前端 >> 内容

Html Canvas注册鼠标事件代码实例讲解

时间：2018/3/15 12:00:22 点击：

　　核心提示：Canvas鼠标事件有以下几个：mousedown 鼠标按下mouseup 鼠标离开屏幕mousemove 鼠标移动mouseout 鼠标离开当前Canvas界面下面getLocation方法获取鼠标...

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>