如何使一幅画跟随另一幅（html画布）答案

【问题标题】：How to make one drawing follow the other (html canvas)如何使一幅画跟随另一幅（html画布）
【发布时间】：2017-11-18 20:36:04
【问题描述】：

我有两张图：一张圆弧和一张圆，我希望圆跟随圆弧的末端。基本上，我需要获取弧的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();

【问题讨论】：

你想切线吗？你需要一些数学知识，虽然他们的lineWidths 是不同的
如果你用paint画你想要的东西然后上传图片会更容易
我将使用计时器为弧设置动画，以便 endPoint() 移动。我希望圆圈的 x,y 跟随那个 x,y。绘画是一种方法吗？
不，不是，这只是为了解释，但我现在明白了。我想你想让圆弧和小黄圈都绕着黑圈转，对吧？
是的，没错！他们将一起移动

标签： javascript html5-canvas

【解决方案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);

【讨论】：

@Kostis，我的解决方案如何工作？我认为它比这个更好，因为它使用了一个为您处理计算并使其更精确的内置函数
我试过了，但我仍然无法让元素的 endAngle 自动移动另一个元素。
@Kostis 在我的解决方案中，您的endAngle 保持固定，您提供给ctx.rotate() 的角度将一起旋转整个圆弧和圆，您可以使用它
是的，你是对的，它的工作原理完全一样。我的意图是在一定时间内为 endAngle 点设置动画，这样它似乎会随着时间的推移而变大，并且圆圈会跟随它。

【解决方案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>

【讨论】：