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

我需要弄清楚如何使canvas元素变为可点击以及如何使用相同的属性复制点击元素。我已经尝试了一些技巧，通过逻辑找到球并指向球的半径和坐标并创建一个克隆构造函数/原型，但无济于事！感谢您的帮助！下面使用Javascript克隆并单击移动的HTML5 Canvas元素

代码：

<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>

的链接小提琴看到代码直播：http://jsfiddle.net/coder101/CMW24/

来源

2014-01-16 Amechi

对于克隆DOM节点使用['cloneNode']（https://developer.mozilla.org/en-US/docs/Web /API/Node.cloneNode）。为了调试代码，使用jsfiddle，所以社区可以帮助你发现点击问题 – lexasss

好主意！我也使用了新的stackoverflow，所以我很欣赏这个建议！ – Amechi

看看像http://www.createjs.com/#!/EaselJS这会让这容易很多。 –

对于克隆DOM节点使用cloneNode。为了调试代码，使用jsfiddle，所以社区可以帮助你发现点击问题

你的代码中有很少的错误。修正版本：

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 '); 
    } 
});

（为什么你需要的jQuery？）

来源

2014-01-16 22:17:42 lexasss

我试过Jquery，想看看我是否可以利用图书馆来帮助我追踪/点击球（就像实验一样）。但非常感谢你的帮助！对此，我真的非常感激！克隆我现在可以更轻松地解决问题！ – Amechi

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

回答

相关问题