html5畫布旋轉移動彈跳球

Question

我將旋轉方法放入球時，旋轉繞屏幕彈跳的球時出現問題，只是以非常寬的旋轉弧線從畫布上消失了。 當球靜止時它正在工作，但是當我按x，y速度運動時，問題就開始了。 有人可以給我的螞蟻幫助將不勝感激。 請看下面我到目前為止的代碼。

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

Answer 1

旋轉渲染的路徑。 將原點設置為旋轉點，旋轉所需的量並將路徑渲染為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

html5畫布旋轉移動彈跳球

問題描述

1 個解決方案

解決方案1
0 2017-10-14 19:08:23

html5畫布旋轉移動彈跳球

問題描述

1 個解決方案

解決方案1 0 2017-10-14 19:08:23

解決方案1
0 2017-10-14 19:08:23