使用Javascript克隆并单击移动的HTML5 Canvas元素

Question

I need to figure out how to make a canvas element become clickable as well duplicate the element on the click, with the same properties. 我需要弄清楚如何使canvas元素可单击，以及在单击时复制具有相同属性的元素。 I have tried a few tricks with finding the ball via logic and pointing to the radius and coordinates of the ball and creating a clone constructor/prototype but to no avail has it worked! 我尝试了一些技巧，通过逻辑找到球并指向球的半径和坐标，并创建克隆构造函数/原型，但没有成功！ Thank you for the help! 感谢您的帮助！

Code below: 代码如下：

    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #balling {
            border:1px solid rgb(0,0,0);
        }

    </style>
</head>
<body>

    <canvas id="balling" width="500" height="400"></canvas>



    <!-- Javascript on the bottom to make page run faster -->
    <script type="text/javascript" src="js/lib/jquery.js"></script>
    <script type="text/javascript">

        var canvas = document.getElementById('balling');
        var context = canvas.getContext('2d');

        // The Properties of the Circle and Position within the Viewport
        var CircleOptions = {
        posBall: {
            x: 160, 
            y: 180
        },
            radius: 40,
            startAngle: 0, 
            endAngle: Math.PI * 2, 
            anticlockwise: false,
            radians: 0,
            xMove: Math.random(),
            yMove: Math.random(),
            speed:2,
            angle:80,
            velocityX:1,
            velocityY:1
        }; 

        //Math to make the ball move
        function moveBall() {
            CircleOptions.radians = CircleOptions.angle * Math.PI/180;
            CircleOptions.xMove = Math.cos(CircleOptions.radians) * CircleOptions.speed * CircleOptions.velocityX;
            CircleOptions.yMove = Math.sin(CircleOptions.radians) * CircleOptions.speed * CircleOptions.velocityY;
        }

        //Function to draw the ball
        function DrawOptions() {
        //Reset Canvas
            context.fillStyle = "white";
            context.fillRect(0, 0, canvas.width, canvas.height);

        //Drawing of the ball
            context.fillStyle = "rgb(142, 68, 173)";
            context.beginPath();
            context.arc(CircleOptions.posBall.x, CircleOptions.posBall.y, CircleOptions.radius, CircleOptions.startAngle, CircleOptions.endAngle, CircleOptions.anticlockwise);
            context.closePath();
            context.fill(); 


            }

        //finding the coordinates of the circle
        function CircleCoordinates(CircleOptions) {
            var left = CircleOptions.posBall.x - CircleOptions.radius,
            top = CircleOptions.posBall.y + CircleOptions.radius,
            right = CircleOptions.posBall.x + CircleOptions.radius,
            bottom = CircleOptions.posBall.y - CircleOptions.radius;
        }

        // Animate and call the function to move the ball
        setInterval(Move, 20);

        //Function call for the ball
        moveBall();

        //The function to make it move, reset canvas for movement and color/create shape of ball
        function Move() {
            //Function call for drawing and pinpointing the coordinates
            DrawOptions();
            CircleCoordinates(CircleOptions);


            //Power to make it move
            CircleOptions.posBall.x += CircleOptions.xMove;
            CircleOptions.posBall.y += CircleOptions.yMove; 

            //checks for ball hitting the Wall
            if(CircleOptions.posBall.x > canvas.width || CircleOptions.posBall.x < 0) {
                CircleOptions.angle -= 770;
                moveBall();
            } else if(CircleOptions.posBall.y > canvas.height || CircleOptions.posBall.y < 0) {
                CircleOptions.angle -= 2760;
                moveBall();
            } else if(CircleOptions.posBall.y == canvas.height || CircleOptions.posBall.y > canvas.width) {
                CircleOptions.angle += 90;
                moveBall();
            }
        }

        $('#balling').on('click', function(e) {
            var clickedX = e.pageX - this.offsetLeft;
            var clickedY = e.pageY - this.offsetTop;

            if (clickedX > CircleOptions.right && clickedX > CircleOptions.left && clickedY > CircleOptions.top && clickedY < CircleOptions.bottom) {
                alert ('clicked number ');
            }
        }); 

        //Clone prototype and constructor
        function Clone() {
            Clone.prototype = CircleOptions;
            var c = new Clone();
            if(CircleOptions.posBall.x < canvas.width || CircleOptions.posBall.y == canvas.height) {
                return c;
            }

        }

        //function call for clone
        Clone();




    </script>
</body>

A link to the fiddle to see the code live: http://jsfiddle.net/coder101/CMW24/ 小提琴的链接，可实时查看代码： http : //jsfiddle.net/coder101/CMW24/

Answer 1

For cloning DOM nodes use cloneNode . 要克隆DOM节点，请使用cloneNode 。 For debugging the code use jsfiddle, so the community could help you in spotting the problem with clicks 要调试代码，请使用jsfiddle，以便社区可以帮助您发现点击问题

You had few bugs in your code. 您的代码中几乎没有错误。 The corrected version: 更正的版本：

function CircleCoordinates() {
    CircleOptions.left = CircleOptions.posBall.x - CircleOptions.radius,
    CircleOptions.right = CircleOptions.posBall.x + CircleOptions.radius,
    CircleOptions.top = CircleOptions.posBall.y - CircleOptions.radius,
    CircleOptions.bottom = CircleOptions.posBall.y + CircleOptions.radius;
}

...

canvas.addEventListener('click', function (e) {
    var clickedX = e.pageX - this.offsetLeft;
    var clickedY = e.pageY - this.offsetTop;

    if (clickedX < CircleOptions.right && clickedX > CircleOptions.left && clickedY > CircleOptions.top && clickedY < CircleOptions.bottom) {
        alert('clicked number ');
    }
});

(Why do you need jQuery?) （为什么需要jQuery？）

使用Javascript克隆并单击移动的HTML5 Canvas元素

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-01-16 22:17:42

使用Javascript克隆并单击移动的HTML5 Canvas元素

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-01-16 22:17:42

解决方案1
0 已采纳 2014-01-16 22:17:42