canvas点击事件

最新推荐文章于 2024-08-10 05:02:47 发布

徐同保

最新推荐文章于 2024-08-10 05:02:47 发布

阅读量4.9k

点赞数 3

分类专栏： web前端前端技术分享文章标签： canvas点击事件

本文链接：https://blog.csdn.net/xutongbao/article/details/82849204

版权

web前端同时被 2 个专栏收录

735 篇文章 16 订阅

订阅专栏

前端技术分享

271 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>canvas点击事件</title>
</head>

<body>
    <canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">
        您的浏览器不支持 HTML5 canvas 标签。</canvas>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(function () {
        var myAction = {}, ctx;

        var dom = {
            canvas: $('#myCanvas')
        };

        $.extend(myAction, {
            initCanvas: function () {
                ctx = dom.canvas[0].getContext("2d");

                ctx.rect(10, 10, 100, 100);
                ctx.rect(120, 10, 100, 100);
                ctx.stroke();
            },
            getEventPosition: function (ev) {
                var x, y;
                if (ev.layerX || ev.layerX == 0) {
                    x = ev.layerX;
                    y = ev.layerY;
                } else if (ev.offsetX || ev.offsetX == 0) { // Opera
                    x = ev.offsetX;
                    y = ev.offsetY;
                }
                return { x: x, y: y };
            },
            initEvent: function () {
                dom.canvas.on('click', function(e) {
                    var p = myAction.getEventPosition(e);
                    if (ctx.isPointInPath(p.x, p.y)) {
                        console.log(1);
                    } else {
                        console.log(2);
                    }
                });                
            }
        });

        var init = function () {
            myAction.initCanvas();
            myAction.initEvent();
        }();
    })
    </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>canvas点击事件</title>
</head>

<body>
    <canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">
        您的浏览器不支持 HTML5 canvas 标签。</canvas>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(function() {
        var myAction = {},
            ctx;
        var arr = [
            {x: 10, y: 10, width: 100, height: 100},
            {x: 120, y: 10, width: 100, height: 100}
        ];

        var dom = {
            canvas: $('#myCanvas')
        };

        $.extend(myAction, {
            initCanvas: function() {
                ctx = dom.canvas[0].getContext("2d");
                //ctx = canvas.getContext('2d');
                myAction.draw();
            },
            getEventPosition: function(ev) {
                var x, y;
                if (ev.layerX || ev.layerX == 0) {
                    x = ev.layerX;
                    y = ev.layerY;
                } else if (ev.offsetX || ev.offsetX == 0) { // Opera
                    x = ev.offsetX;
                    y = ev.offsetY;
                }
                return { x: x, y: y };
            },
            draw: function(p) {
                var who = [];
                ctx.clearRect(0, 0, dom.canvas[0].width, dom.canvas[0].height);
                arr.forEach(function(v, i) {
                    ctx.beginPath();
                    ctx.rect(v.x, v.y, v.width, v.height);
                    ctx.stroke();
                    if (p && ctx.isPointInPath(p.x, p.y)) {
                        //如果传入了事件坐标，就用isPointInPath判断一下
                        //如果当前环境覆盖了该坐标，就将当前环境的index值放到数组里
                        who.push(i);
                    }
                });
                //根据数组中的index值，可以到arr数组中找到相应的元素。
                return who;
            },
            initEvent: function() {
                dom.canvas.on('click', function(e) {
                    var p = myAction.getEventPosition(e);
                    var result = myAction.draw(p);
                    console.log(result);
                });
            }
        });

        var init = function() {
            myAction.initCanvas();
            myAction.initEvent();
        }();
    })
    </script>
</body>

</html>