Question

我有两张图：一个圆弧和一个圆圈，我希望圆圈跟随圆弧的末端。基本上，我需要获取弧的endAngle的x＆amp; 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坐标，你应该使用NSString *scriptCode = [NSString stringWithFormat:@"do shell script \"%@\"", @"networksetup -getinfo Wi-Fi"]; NSDictionary *errorDict = nil; NSAppleScript *script = [[NSAppleScript alloc]initWithSource:scriptCode]; NSAppleEventDescriptor *returnDescriptor = [script executeAndReturnError:&errorDict]; NSLog(@"%@", returnDescriptor.stringValue);表示x，cos表示y。

像这样得到弧的结束（x，y）：

sin

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;

以下是完整的代码：

＆＃13;

  	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();

＆＃13;

body {
  background-color: #50B3B9;
}

#clock {
  background-color: red;
  position:relative;
}

#time {
  position:absolute;
  top:0px;
}


----------

＆＃13;

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

＆＃13;

如何使一个绘图跟随另一个（html画布）

2 个答案: