html5画布旋转移动弹跳球

我有一个问题，当我把旋转方法放在里面时，会旋转一个在屏幕上弹跳的球，只是在非常宽的旋转弧中消失在画布上。当球静止时它正在工作，但是当我把x，y速度问题开始时。蚂蚁帮助别人可以给我将不胜感激。请看下面我到目前为止的代码。html5画布旋转移动弹跳球

<!DOCTYPE html> 

<html> 

    <head> 
    <meta charset="UTF-8"> 
    <title>Canvas</title> 

    <style type="text/css"> 
    canvas { 
     border: 1px solid black; 
    } 
     body { 
      background-color: white; 
     } 
    </style> 

    </head> 

    <body> 

    <canvas id="canvas-for-ball"></canvas> 

    <script type="text/javascript"> 
     // Gets a handle to the element with id canvasOne. 
     var canvas = document.getElementById("canvas-for-ball"); 
     // Get a 2D context for the canvas. 
     var ctx = canvas.getContext("2d"); 
     canvas.width = 500; 
      canvas.height = 500; 
     // The vertical location of the ball. 
     //var y = 10; 
     var yvel = 3; 
     var xvel = 3 ; 
     //ball object 
     var ball = { 
     x: 90, 
     y: 150, 
     r: 50 
     }; 
     // A function to repeat every time the animation loops. 
     function repeatme() { 
     //clear canvas for each frame of the animation. 
     ctx.clearRect(0,0,500,500); 
     // Draw the ball (stroked, not filled). 
     //for loop to draw each line of th pie. 
     // i is set to 7. set i to whatever amount of sections you need. 
     for (var i = 0; i < 7; i++) { 
      //starting point 
        ctx.beginPath(); 
      //move to positions the pen to the center of the ball 
        ctx.moveTo(ball.x, ball.y); 
      //circle craeted with x,y and r set. The final two arguments (Starting and ending point) 
      //change over each itteration of the loop giving a new point on the circle to draw to. 
        ctx.arc(ball.x, ball.y, ball.r, i*(2 * Math.PI/7), (i+1)*(2 * Math.PI/7)); 
      //set line width 
        //set colour of the lines 
      ctx.strokeStyle = '#444'; 
      //render the lines 
      ctx.stroke(); 
       } 
       ctx.beginPath(); 
      //the inner circle of the pizza 
        ctx.moveTo(ball.x, ball.y); 
      //ball.r is used - 10 pixles to put the smaller circle in the pizza. 
        ctx.arc(ball.x,ball.y,ball.r-10,0,2*Math.PI); 
        ctx.lineWidth = 2; 
        ctx.strokeStyle = '#444'; 
        ctx.stroke(); 

      ctx.translate(ball.x, ball.y); 

      // Rotate 1 degree 
      ctx.rotate(Math.PI/180); 

      // Move registration point back to the top left corner of canvas 
      ctx.translate(-ball.x, -ball.y); 
      //draw the ball 

      //restore canvas back to original state 
      ctx.restore();      

     // Update the y location. 
     ball.y += yvel; 
     ball.x += xvel; 
     //put repeatme function into the animation frame and store it in animate 
     animate = window.requestAnimationFrame(repeatme); 
     //condition take into account the radius of the ball so 
     //it bounces at the edge of the canvas instead 
     //of going off of the screen to its center point. 

     if(ball.y >= canvas.height - ball.r){ 
      //window.cancelAnimationFrame(animate); 
      yvel = yvel *-1; 
     }else if(ball.y <= ball.r){ 
      yvel = yvel /-1; 
     } 
     if(ball.x >= canvas.width- ball.r){ 
      xvel = xvel *-1; 
     }else if(ball.x <=ball.r){ 
      xvel = xvel/-1; 
     } 
     } 

     // Get the animation going. 
     repeatme(); 


    </script> 

    </body> 

</html>

来源

2017-10-14 user2963022

旋转呈现的路径。将原点设置为旋转点，按所需数量旋转并渲染路径为0,0

rotation += Math.PI/180; // rotate 1 deg steps 
ctx.lineWidth = 2; 
ctx.strokeStyle = '#444'; 

ctx.setTransform(1, 0, 0, 1, ball.x, ball.y); // set the origin at the center 
ctx.rotate(rotation); // set the rotation amount 
ctx.beginPath(); 
ctx.moveTo(0, 0); 
ctx.arc(0, 0, ball.r - 10, 0, 2 * Math.PI); 
ctx.stroke(); 
ctx.setTransform(1,0,0,1,0,0); // restore the default transform

来源

2017-10-14 19:08:23 Blindman67

html5画布旋转移动弹跳球

回答

相关问题