html5 isPointInPath相关操作

时间：2024-05-17 08:32:50
<body>

    <canvas id="c1" width="" height="">

    </canvas>

    <script type="text/javascript">

        var oC = document.getElementById("c1");

        var oGC = oC.getContext("2d");

        var c1 = new Shape(, , );

        var c2 = new Shape(, , );

        oC.onmousedown = function (ev) {

            var ev = ev || window.event;

            var point = {

                x: ev.clientX - oC.offsetLeft,

                y: ev.clientY - oC.offsetTop

            };

            c1.reDraw(point);

            c2.reDraw(point);

        }

        c1.click = function () {

            alert();

        }

        c2.click = function () {

            alert();

        }

        function Shape(x, y, r) {

            this.x = x;

            this.y = y;

            this.r = r;

            oGC.beginPath();

            oGC.arc(x, y, r, ,  * Math.PI / ,false);

            oGC.closePath();

            oGC.fill();

        }

        Shape.prototype.reDraw = function (point) {

            oGC.beginPath();

            oGC.arc(this.x, this.y, this.r, ,  * Math.PI / , false);

            oGC.closePath();

            oGC.fill();

            if (oGC.isPointInPath(point.x, point.y)) {

                this.click();

            }

        }

    </script>

</body>

使用习惯了html中的click等事件，用isPointInPath()这个方法感觉还是很不方便，有没有像jquery那样的方便链式操作，答案是有，有人已经把canvas的事件操作封装成库，这就是jCanvasScript.js。

相关文章