点击查看html编辑器说明文档

已知圆心和坐标半径,计算旋转某个角度后圆周坐标edit icon

|
|
Fork(复制)
|
|
作者:
lynn-ssk
提交反馈
嵌入
设置
下载
HTML
格式化
支持Emmet,输入 p 后按 Tab键试试吧!
<head> ...
展开
</head>
<body>
            
            <canvas id='cvs'></canvas>
        
</body>
CSS
格式化
            
            #cvs {
  border: 1px solid #ccc;
}
        
JS
格式化
            
                /**
     * 计算某个点旋转后的坐标
     *
     * @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 };
    }


    const cvs = document.getElementById('cvs');
    cvs.width = 300;
    cvs.height = 300;
    const ctx = cvs.getContext("2d");

    function drawPoint(p) {

      ctx.beginPath();
      ctx.arc(p.x,p.y, 2, 0, 2 * Math.PI, false);
      ctx.fillStyle = "red";
      ctx.fill(); 
    }  

    let center = { x: 150, y: 150}
    let start_point = { x:center.x + 50, y:center.y };
    let start_angle = 90;
    let count = 8;
    let single_angle = 360/count


    drawPoint(center);
    for(let i = 0; i< count; i++){
      const p = rotatePoint(start_point, start_angle + single_angle * i, center)
      drawPoint(p);
      console.log(p.x, p.y);
      
    }
    
    


        
预览
控制台
清空