Javascript 围绕三角形画布旋转圆圈

我想用画布绕三角形旋转一圈。前面有这个代码，但是中间有一个圆圈，一个长方形旋转，我想要圆圈旋转，中间有一个三角形。有人能帮忙吗

以下是我的JS代码：

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var-cx=100；
var-cy=100；
宽度=15；
高度=10；
var旋转=0；
请求动画帧（动画）；
函数animate（）{
请求动画帧（动画）；
clearRect（0，0，canvas.width，canvas.height）；
ctx.beginPath（）；
ctx.arc（cx，cy，10，0，Math.PI*2）；
ctx.closePath（）；
ctx.fill（）；
ctx.save（）；
翻译（cx，cy）；
ctx.旋转（旋转）；
ctx.strokeRect（-rectWidth/2+20，-rectHeight/2，rectWidth，rectHeight）；
ctx.restore（）；
旋转+=Math.PI/180；
}

---

我已经编辑了您的代码来绘制所需的形状，并添加了注释来描述我在下面的代码片段中所做的事情

var canvas=document.body.appendChild（document.createElement（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var-cx=100；
var-cy=100；
var旋转=0；
请求动画帧（动画）；
函数animate（）{
//透明帆布
clearRect（0，0，canvas.width，canvas.height）；
//画中心图
/*
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（）；
//旋转画布
ctx.save（）；
翻译（cx，cy）；
ctx.旋转（旋转）；
//绘制旋转对象
/*ctx.strokeRect（-rectWidth/2+20，-rectHeight/2，rectWidth，rectHeight）*/
ctx.beginPath（）；
ctx.arc（20,0,5,0，Math.PI*2）；
ctx.closePath（）；
ctx.fill（）；
//向后旋转画布
ctx.restore（）；
//保存旋转
旋转+=Math.PI/180；
//请求下一帧
请求动画帧（动画）；
}

尝试以下操作：

<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>

---

这是一种不使用

ctx.translate

或

ctx.rotate

我们可以使用

Math.sin

和

Math.cos

做圆周或椭圆运动。
一旦理解了这种方法，就可以打开许多可能性的大门，例如，可以相对于其他对象进行旋转

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var旋转=0；
设置间隔（动画，10）；
函数动画（rx、ry、速度）{
clearRect（0，0，canvas.width，canvas.height）；
抽签（120、80、1）
抽签（240、80、10/3）
}
功能图（rx、ry、速度）{
变量x=数学cos（旋转）*50+rx
变量y=数学sin（旋转）*50+ry
ctx.beginPath（）
弧（x，y，20，0，Math.PI*2）；
ctx.stroke（）；
对于（变量i=1；i<8；i++）{
x+=数学sin（旋转*i/速度）*20
y+=数学cos（旋转*i/速度）*20/i
ctx.beginPath（）
ctx.arc（x，y，8/i，0，Math.PI*2）；
ctx.stroke（）；
}
旋转+=Math.PI/180；
}

---

是的，以循环方式移动对象可能需要trigo。但一些基本的解释可能会大大改进这个答案（因此读者实际上可以“理解这个方法”）。另外，要当心你说的话。您对arc方法的x和y值的设置仅相当于一个

translate（x，y）；圆弧（0,0..

。因此，使用这两个参数所能做的一切实际上都可以通过一个简单的转换来完成。仅使用trig…更难做的一件事是改变形状的比例和倾斜度。此外，一旦得到矩阵变换，就不难制作了。