HTML5 Canvas多层点击事件监听实例

最新推荐文章于 2023-03-01 12:35:42 发布

C860

最新推荐文章于 2023-03-01 12:35:42 发布

阅读量3.9k

点赞数

分类专栏： HTML/CSS Javascript 文章标签： javascript 前端开发 canvas 游戏

本文链接：https://blog.csdn.net/C860_zy/article/details/21723115

版权

HTML/CSS 同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

Javascript

35 篇文章 0 订阅

订阅专栏

最近写一个HTML5的游戏框架。今天写到一个多层点击事件的监听。觉得还是挺好玩的。于是把它从模块中抽化出来了。以下代码只是一些思想。具体实现肯定不是那么丑陋。如果想具体了解，这里是代码托管地址（无耻地卖了一下广告）：https://github.com/c860/EasyGaming

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .box > canvas {
        position: absolute;
    }
    </style>
</head>
<body>
    <div class="box">
        <canvas id="layer1" width="200" height="200"></canvas>
        <canvas id="layer2" width="500" height="500"></canvas>
    </div>
    <script type="text/javascript">
    function getRect(obj) {
        var x1 = obj.offsetLeft;
        var y1 = obj.offsetTop;
        var x2 = x1+obj.offsetWidth;
        var y2 = y1+obj.offsetHeight;
        return {
            x1: x1,
            y1: y1,
            x2: x2,
            y2: y2
        };
    }
    function inside(x, y, rect) {
        if(x>rect.x1 && x<rect.x2 && y>rect.y1 && y<rect.y2) {
            return true;
        }
        else {
            return false;
        }
    }
    var trigger = {};
    trigger.list = [];
    trigger.listen = function() {
        var list = trigger.list;
        document.addEventListener('click',function(evt) {
            for(var i=0; i<list.length; ++i) {
                list[i](evt);
            }
        });
    };
    trigger.listen();
    var l1 = document.getElementById('layer1');
    var l2 = document.getElementById('layer2');
    var dl1 = function(evt) {
        if(inside(evt.clientX, evt.clientY, getRect(l1))) {
            console.log('click');
        }
    }
    trigger.list.push(dl1);
    var dl2 = function(evt) {
        if(inside(evt.clientX, evt.clientY, getRect(l2))) {
            console.log('click2');
        }
    }
    trigger.list.push(dl2);
    </script>
</body>
</html>

C860

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML5 Canvas多层点击事件监听实例

最近写一个HTML5的游戏框架。今天写到一个多层点击事件的监听。觉得还是挺好玩的。于是把它从模块中抽化出来了。以下代码只是一些思想。具体实现肯定不是那么丑陋。如果想具体了解，这里是代码托管地址（无耻地卖了一下广告）：https://github.com/c860/EasyGaming Document .box > canvas {
复制链接

扫一扫