今天带来JS基于数学公式求一个点绕另一个点旋转，并贴上动画效果：

效果预览:

思路讲解：

根据数学三角函数推导公式：（具体推导过程都是基于两角和，两角差公式演变，感可自查）

变量说明: [newX,newY = 旋转后的坐标 ] [origin=起始点坐标] [center=参照哪个点旋转坐标]

newY = origin.x * cos(r) - origin.y * sin(r) + center.x;

newX = origin.x * sin(r) + origin.y * cos(r) + center.y;

话不多说上代码:

<canvas id="cvs" width="500" height="500"></canvas>
<script type="text/javascript">

    

    window.onload = function(){
        var deg = 10;
        var cvs = document.querySelector("#cvs");
        var ctx = cvs.getContext("2d")
        console.dir(ctx)

        var start = {x:130, y:130};
        var center = {x:cvs.width/2, y:cvs.height/2};
        var end = {};


        setInterval(function(){
            deg += 5; // 每次加5度
            end = rotatePoint(start, deg, center);
            console.log(end, deg)
            draw();
        }, 30);
        

        function draw() {

            // 清理画布
            ctx.clearRect(0,0,cvs.width, cvs.height)

            // 起始点
            ctx.save();
            ctx.fillStyle="red"
            ctx.fillRect(start.x, start.y, 5, 5);
            

            ctx.fillStyle="green"
            // 绘制中心点
            ctx.fillRect(center.x, center.y, 5, 5);

            ctx.restore();
            // 每次旋转后的点坐标
            ctx.fillRect(end.x, end.y, 5, 5);
        }        

    }    



    /**
     * 计算某个点旋转后的坐标
     *
     * @param point  旋转的点 {x,y}
     * @param angle 旋转的角度
     * @param originPoint 基于哪个点旋转，默认值左上角原点{x: 0, y: 0}
     * @returns {{x: number, y: number}}
     */
    function rotatePoint(point, angle, originPoint = {x: 0, y: 0}) {
        const cosA = Math.cos(angle * Math.PI / 180);
        const sinA = Math.sin(angle * Math.PI / 180);
        const rx = originPoint.x + (point.x - originPoint.x) * cosA - (point.y - originPoint.y) * sinA;
        const ry = originPoint.y + (point.x - originPoint.x) * sinA + (point.y - originPoint.y) * cosA;
        return { x: rx,y: ry };
    }
    </script>

代码主要看最后一个方法 fn rotatePoint， 其中 rx = 中心点坐标x + 半径(起点-中心点) * cos(r) 同理其他都对应上，自己带入到代码里面试一试吧。