javascript - 求解 canvas 做圆周运动时遇到的问题？？

Question

下面有三个球：

第一个动：

这张图绕着
动，速度 v1

第二个动：

这张图绕着
动，速度v2

速度v1 !== v2 。

怎么做到？？

这是我学习canvas动画太阳系的教程网址（我就是仿照这个太阳系动画效果写的）：链接描述

**

感谢大家耐心回答，该问题已解决：

**
关键是要理解旋转 ， 平移后 坐标系的变换..，save 和 restore 的作用。

附上解决后的代码：

// 执行圆周运动
round();

function round(){
    var cav = document.createElement('canvas');
    var ctx = cav.getContext('2d');
    var val = 800;
    document.body.appendChild(cav);
    cav.width = val;
    cav.height = cav.width;
    ctx.save();

    // 围绕绿色大圆 每次旋转的 度数
    var deg = 0.2;
    // 围绕红色小圆 每次旋转的度数
    var deg1 = 1;

    function animate(){
        // 清空画布
        ctx.clearRect(0 , 0 , val , val);

        // 设置画布背景
        ctx.beginPath();
        ctx.rect(0 , 0 , val , val);
        ctx.closePath();
        ctx.fillStyle = 'rgba(245 , 245 ,245 , 0.8)';
        ctx.fill();
        // 设置绿色圆
        ctx.beginPath();
        ctx.arc(400 , 400 , 200 , 0 , getRad(360) , false);
        ctx.closePath();
        ctx.strokeStyle = 'green';
        ctx.stroke();
        // 绿色圆圆心
        ctx.beginPath();
        ctx.arc(400 , 400 , 5 , 0 , getRad(360) , false);
        ctx.closePath();
        ctx.fillStyle = 'red';
        ctx.fill();
        // 保存初始状态
        ctx.save();
        
        // 以下三步 可以让坐标系旋转 deg 弧度（也就是让圆动起来，这步不好解释，你自己手动在纸上进行坐标的平移变换，就知道为什么了）
        ctx.translate(400 , 400);
        ctx.rotate(getRad(deg));
        ctx.translate(-400 , -400);

        ctx.beginPath();
        ctx.arc(600 , 400 , 100 , 0 , getRad(360) , false);
        ctx.closePath();
        ctx.strokeStyle = 'red';
        ctx.stroke();


        ctx.beginPath();
        ctx.arc(600 , 400 , 5 , 0 , getRad(360) , false);
        ctx.closePath();
        ctx.fillStyle = 'red';
        ctx.fill();
        
        // 以下三步同上：可以让 上面旋转后的坐标系 再次旋转
        ctx.translate(600 , 400);
        ctx.rotate(getRad(deg1));
        ctx.translate(-600 , -400);

        ctx.beginPath();
        ctx.arc(700 , 400 , 50 , 0 , getRad(360) , false);
        ctx.closePath();
        ctx.strokeStyle = 'blue';
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(700 , 400 , 5 , 0 , getRad(360) , false);
        ctx.closePath();
        ctx.fillStyle = 'red';
        ctx.fill();
        
        // 恢复坐标系原点为左上角： 0 ，0
        ctx.restore();

        
        // 以围绕大圆旋转的圆 作解释
        // 第一次执行 围绕大圆 0.2 弧度旋转
        // 第二次执行 围绕大圆 0.4 弧度旋转
        // .....
        // 所以大圆在 以 每帧 0.2 弧度的速度 在旋转
        deg+=0.2;
        deg1+=2;
        window.requestAnimationFrame(animate);
    }
    animate();
}

// 角度转换为弧度
function getRad(deg){
  return deg * Math.PI / 180;
}

Answer 1

这个用Canvas不太好画，推荐用two.js

$(setInterval(function(){
          drawRotate("cav1")
      },500));
    var deg=0;
    function drawRotate(id){
        var can=document.getElementById(id);
        var ctx=can.getContext("2d");
        var p=Math.PI;
        deg++;
        deg%=360;
        //清空画布
        ctx.clearRect(0,0,600,600);
        //旋转外层轨道
        ctx.translate(300,300);
        ctx.rotate(deg*p/180);
        //绘制外层圆形轨道
        ctx.beginPath();
        ctx.strokeStyle="black";
        ctx.arc(0,0,150,0,2*p);
        ctx.stroke();

        //绘制大圆并自转
        ctx.translate(150,0);
        ctx.rotate(2*deg*p/180);
        ctx.beginPath();
        ctx.fillStyle="green";
        ctx.arc(0,0,50,0,2*p);
        ctx.fill();
        //绘制大圆轨道
        ctx.beginPath();
        ctx.strokeStyle="red";
        ctx.arc(0,0,80,0,2*p);
        ctx.stroke();
        //绘制小圆
        ctx.beginPath();
        ctx.fillStyle="yellow";
        ctx.arc(80,0,20,0,2*p);
        ctx.fill();

        //恢复旋转
        ctx.rotate(-2*deg*p/180);
        ctx.translate(-150,0);
        ctx.rotate(-deg*p/180);
        ctx.translate(-300,-300);

    }

Answer 2

两个围绕运动，所以球是围绕两个原点做rotate，但是在画布中每次只能有围绕一个原点运动，势必会影响另外的一个球的运动

Answer 3

计算好速度就行了，这是数学问题