围绕三角形画布旋转圆圈答案

【问题标题】：Rotate circle around triangle canvas围绕三角形画布旋转圆圈
【发布时间】：2019-03-03 08:01:08
【问题描述】：

我想使用画布围绕三角形旋转一个圆圈。有之前的代码，但这里是中间的圆圈，和一个旋转的矩形，我希望圆圈旋转并在中间有一个三角形。有人可以帮忙吗？

这是我的 JS 代码：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cx = 100;
var cy = 100;
var rectWidth = 15;
var rectHeight = 10;
var rotation = 0;
requestAnimationFrame(animate);

function animate() {
  requestAnimationFrame(animate);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(cx, cy, 10, 0, Math.PI * 2);
  ctx.closePath();
  ctx.fill();
  ctx.save();
  ctx.translate(cx, cy);
  ctx.rotate(rotation);
  ctx.strokeRect(-rectWidth / 2 + 20, -rectHeight / 2, rectWidth, rectHeight);
  ctx.restore();

  rotation += Math.PI / 180;
}

&lt;canvas id="canvas"&gt;&lt;/canvas&gt;

【问题讨论】：

标签： javascript canvas html5-canvas

【解决方案1】：

我已经编辑了您的代码以绘制所需的形状并添加了 cmets 来描述我在下面的 sn-p 中所做的事情。

var canvas = document.body.appendChild(document.createElement("canvas"));
var ctx = canvas.getContext("2d");
var cx = 100;
var cy = 100;
var rotation = 0;
requestAnimationFrame(animate);
function animate() {
    //Clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    //Draw center figure
    /*
    ctx.beginPath();
    ctx.arc(cx, cy, 10, 0, Math.PI * 2);
    ctx.closePath();
    ctx.fill();
    */
    ctx.beginPath();
    ctx.moveTo(cx - 10, cy - 10);
    ctx.lineTo(cx, cy + 10);
    ctx.lineTo(cx + 10, cy - 10);
    ctx.closePath();
    ctx.fill();
    //Rotate canvas
    ctx.save();
    ctx.translate(cx, cy);
    ctx.rotate(rotation);
    //Draw rotating object
    /*ctx.strokeRect(-rectWidth / 2 + 20, -rectHeight / 2, rectWidth, rectHeight);*/
    ctx.beginPath();
    ctx.arc(20, 0, 5, 0, Math.PI * 2);
    ctx.closePath();
    ctx.fill();
    //Rotate canvas back
    ctx.restore();
    //Save rotation
    rotation += Math.PI / 180;
    //Request next frame
    requestAnimationFrame(animate);
}

听起来你缺乏HTML Canvas操作的经验，所以我想推荐一些MDN's official canvas tutorial。

如果您还有其他问题，请随时提出新的问题，将来会遇到更多特定于代码的问题。

【讨论】：

【解决方案2】：

这是不使用ctx.translate 或ctx.rotate 移动对象的替代方法

我们可以使用Math.sin 和Math.cos 来做圆周运动或椭圆运动。
一旦你理解了这种方法，你就会为许多可能性打开大门，例如，你可以相对于其他物体进行旋转。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var rotation = 0;
setInterval(animate, 10);

function animate(rx, ry, speed) { 
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  draw(120, 80, 1)
  draw(240, 80, 10/3)
}

function draw(rx, ry, speed) {    
  var x = Math.cos(rotation) * 50 + rx
  var y = Math.sin(rotation) * 50 + ry
  
  ctx.beginPath()
  ctx.arc(x, y, 20, 0, Math.PI * 2);
  ctx.stroke();
  
  for (var i = 1; i < 8; i++) {
    x += Math.sin(rotation * i/speed) * 20
    y += Math.cos(rotation * i/speed) * 20/i
    ctx.beginPath()
    ctx.arc(x, y, 8/i, 0, Math.PI * 2);
    ctx.stroke();
  }
  rotation += Math.PI / 180;
}

&lt;canvas id="canvas" height=170 width=400&gt;&lt;/canvas&gt;

【讨论】：

是的，很好的一点是，以循环方式移动对象 trigo 可能正是需要的。但是一些基本的解释可能会大大改善这个答案（因此读者实际上可以“理解这种方法”）。另外，请注意您所说的内容。您对 arc 方法的 x 和 y 值的设置仅相当于 translate(x, y); arc(0,0..。所以你可以用这两个参数做的所有事情实际上都可以通过简单的翻译来be done。仅使用触发会更难的一件事......
...虽然会改变形状的比例和倾斜度，like rotate() does。此外，一旦你得到矩阵变换，制作objects relatives to each others 并不难。

【解决方案3】：

尝试以下方法：

<code>    
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cx=100;
var cy=100;
var rectWidth=15;
var rectHeight=10;
var rotation=0;
requestAnimationFrame(animate);
function animate(){
    requestAnimationFrame(animate);
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.beginPath();

    var radius = 8;        
    ctx.moveTo(cx - radius, cy + radius);        
    ctx.lineTo(cx, cy - radius);        
    ctx.lineTo(cx + radius , cy + radius);        
    ctx.lineTo(cx - radius, cy + radius);        
    ctx.fill();

    ctx.save();
    ctx.translate(cx,cy);
    ctx.rotate(rotation);
    ctx.strokeRect(-rectWidth/2+20,-rectHeight/2,rectWidth,rectHeight);
    ctx.restore(); 
    rotation+=Math.PI/180;
}
</code>

【讨论】：