网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 一个不错的HTML5 Canvas多层点击事件监听实例
内容
    最近写一个HTML5的游戏框架。今天写到一个多层点击事件的监听。觉得还是挺好玩的。于是把它从模块中抽化出来了。以下代码只是一些思想。具体实现肯定不是那么丑陋
    代码如下:
    <!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>
    <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>
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/17 8:00:52