时间戳

首页 > 解决方案 > Javascript画布。如何动画绘制的对象顺时针或逆时针旋转，直到它指向给定坐标的方向？

javascript - Javascript画布。如何动画绘制的对象顺时针或逆时针旋转，直到它指向给定坐标的方向？

问题描述

请看下面的代码片段。我需要在动画中旋转白球，直到它指向黄色圆圈的方向。理想情况下，它应该根据哪一侧更靠近顺时针或逆时针旋转。

var ctx = mycanvas.getContext("2d"),
  pWidth = 14,
  p1 = {
    x: 100,
    y: 100
  },
  p2 = {
    x: 300,
    y: 400
  },
  ball = {
    x: p1.x + pWidth,
    y: p1.y
  };

function drawCircle(x, y, w, color) {
  ctx.fillStyle = color;
  ctx.beginPath();
  ctx.arc(x, y, w, 0, 2 * Math.PI);
  ctx.fill();
}

function drawObjs() {
  ctx.clearRect(0, 0, mycanvas.width, mycanvas.height);

  drawCircle(p1.x, p1.y, pWidth, "blue");
  drawCircle(ball.x, ball.y, 6, "white");

  drawCircle(p2.x, p2.y, pWidth, "yellow");
}

setInterval(drawObjs(), 1000);
<head>
  <style>
    #mycanvas {
      border: solid 10px #060;
    }
  </style>
</head>

<body style="text-align:center">
  <canvas id="mycanvas" width="640" height="480" style="background-color:green"></canvas>
</body>
<script>
</script>

像这样

例子

标签： javascriptanimationcanvasrotation

解决方案

推荐阅读