如何使一幅画跟随另一幅(html画布)

Question

我有两幅画:一条弧线和一条圆圈，我想让这个圆圈跟在圆弧的末端。基本上，我需要获取弧的endAngle的x&y，这样我就可以在圆圈上使用它来跟踪它。

 //Arc
 context.beginPath(); 
 var x2 = canvas.width / 2; 
 var y2 = canvas.height / 2; 
 var radius2 = 215; 
 var startAngle2 = 1.5 * Math.PI; 
 var endAngle2= 2.3 * Math.PI; 
 var counterClockwise2 = false; 
 context.arc(x2, y2, radius2, startAngle2, endAngle2, counterClockwise2); 
 context.lineWidth = 10; 
 context.strokeStyle = "blue"; 
 context.stroke(); 

 //Circle
 context.beginPath(); 
 var x3 = x2+ 130; 
 var y3 = y2 + 200; 
 var radius3 = 20; 
 var startAngle3 = 0 * Math.PI; 
 var endAngle3 = 2 * Math.PI; 
 var counterClockwise3 = false; 
 context.arc(x3, y3, radius3, startAngle3, endAngle3, counterClockwise3); 
 context.lineWidth = 5; 
 context.strokeStyle = "yellow"; 
 context.stroke();

Answer 1

如果您想要得到弧尾的x，y坐标，您应该使用cos表示x，sin处理y。

得到你的弧的末端(x，y)如下：

var x3 = canvas.width / 2 + radius2*Math.cos(endAngle2);
var y3 = canvas.height / 2  + radius2*Math.sin(endAngle2);

Answer 2

使用ctx.rotate(angle);更容易，旋转的中心是0,0标识的画布的起源。为了选择另一个，您需要使用ctx.translate(x, y);，其中x，y是旋转中心的坐标。

context.translate(x1,y1)
context.rotate(20*Math.PI/180)

最后，您需要更改坐标以引用新的中心。

    context.arc(x2, y2, radius2, startAngle2, endAngle2, counterClockwise2);
...

....

    var x3 = x2 + 130;
    var y3 = y2 + 200; 

变成了

context.arc(0, 0, radius2, startAngle2, endAngle2, counterClockwise2);
....

...
var x3 =  130;
var y3 =  200; 

，这是完整的代码：

​

  	var canvas=document.getElementById("clock");
      var context = canvas.getContext('2d');


context.beginPath();

      var x1 = canvas.width/2;
      var y1 = canvas.height/2;
      var radius1 = 200;
      var startAngle1 = 0 * Math.PI;
      var endAngle1 = 2 * Math.PI;
      var counterClockwise1 = false;

context.arc(x1, y1, radius1, startAngle1, endAngle1, counterClockwise1);
context.lineWidth = 20;
context.strokeStyle = 'black';
context.stroke();
context.font = "bold 76px Arial";
context.textAlign="center"; 
context.textBaseline="middle"; 
context.fillText("25:00", canvas.width/2, canvas.height/2);

 
context.beginPath();

context.translate(x1,y1)
context.rotate(Math.PI)
var radius2 = 215;
var startAngle2 = 1.5 * Math.PI;
var endAngle2 = 2.3 * Math.PI;
var counterClockwise2 = false;
context.arc(0, 0, radius2, startAngle2, endAngle2, counterClockwise2);
context.lineWidth = 10;
context.strokeStyle = "blue";
context.stroke();
context.beginPath();
var x3 = 130;
var y3 = 200;
var radius3 = 20;
var startAngle3 = 0 * Math.PI;
var endAngle3 = 2 * Math.PI;
var counterClockwise3 = false;
context.arc(x3, y3, radius3, startAngle3, endAngle3, counterClockwise3);
context.lineWidth = 5;
context.strokeStyle = "yellow";
context.stroke();

body {
  background-color: #50B3B9;
}

#clock {
  background-color: red;
  position:relative;
}

#time {
  position:absolute;
  top:0px;
}


----------

  <div class="container">
    <canvas id="clock" width="600" height="600">
      <div id="time">25:00</div>
    </canvas>
  </div>

​