HTML Canvas Animation Move image along Bezier Curve

Description

HTML Canvas Animation Move image along Bezier Curve

View in separate window 

<!doctype html>
<html lang="en">
<head>


</head>//from  ww w .j av a  2 s. c  o m
<body>
  <canvas id="canvasOne" width="500" height="500">
 Your browser does not support the HTML 5 Canvas. 
</canvas>


  <script type="text/javascript">
    let bullseye;
    bullseye = new Image();
    bullseye.src = "image1.png"

    function drawScreen() {

      context.fillStyle = '#EEEEEE';
      context.fillRect(0, 0, theCanvas.width, theCanvas.height);
      //Box
      context.strokeStyle = '#000000';
      context.strokeRect(1, 1, theCanvas.width - 2, theCanvas.height - 2);

      let t = player.t;

      let cx = 3 * (p1.x - p0.x)
      let bx = 3 * (p2.x - p1.x) - cx;
      let ax = p3.x - p0.x - cx - bx;

      let cy = 3 * (p1.y - p0.y);
      let by = 3 * (p2.y - p1.y) - cy;
      let ay = p3.y - p0.y - cy - by;

      let xt = ax * (t * t * t) + bx * (t * t) + cx * t + p0.x;

      let yt = ay * (t * t * t) + by * (t * t) + cy * t + p0.y;

      player.t += player.speed;

      if (player.t > 1) {
        player.t = 1;
      }
      //draw the p[oints

      context.font = "10px sans";

      context.fillStyle = "#FF0000";
      context.beginPath();
      context.arc(p0.x, p0.y, 8, 0, Math.PI * 2, true);
      context.closePath();
      context.fill();
      context.fillStyle = "#FFFFFF";
      context.fillText("0", p0.x - 2, p0.y + 2);

      context.fillStyle = "#FF0000";
      context.beginPath();
      context.arc(p1.x, p1.y, 8, 0, Math.PI * 2, true);
      context.closePath();
      context.fill();
      context.fillStyle = "#FFFFFF";
      context.fillText("1", p1.x - 2, p1.y + 2);

      context.fillStyle = "#FF0000";
      context.beginPath();
      context.arc(p2.x, p2.y, 8, 0, Math.PI * 2, true);
      context.closePath();
      context.fill();
      context.fillStyle = "#FFFFFF";
      context.fillText("2", p2.x - 2, p2.y + 2);

      context.fillStyle = "#FF0000";
      context.beginPath();
      context.arc(p3.x, p3.y, 8, 0, Math.PI * 2, true);
      context.closePath();
      context.fill();
      context.fillStyle = "#FFFFFF";
      context.fillText("3", p3.x - 2, p3.y + 2);

      context.closePath();

      player.x = xt - bullseye.width / 2;
      player.y = yt - bullseye.height / 2;

      context.drawImage(bullseye, player.x, player.y);

    }

    let p0 = {
      x : 150,
      y : 440
    };
    let p1 = {
      x : 450,
      y : 10
    };
    let p2 = {
      x : 50,
      y : 10
    };
    let p3 = {
      x : 325,
      y : 450
    };
    let player = {
      x : 0,
      y : 0,
      speed : .01,
      t : 0
    };

    let points = new Array();

    theCanvas = document.getElementById('canvasOne');
    context = theCanvas.getContext('2d');

    function gameLoop() {
      window.setTimeout(gameLoop, 20);
      drawScreen()
    }

    gameLoop();
  </script>

</body>
</html>



PreviousNext

Related