如何在Canvas旋转后计算直线与画布边界的交点？

核心思路 #

不用直接处理Canvas的坐标系旋转，换个更简单的方式：先计算以画布中心为原点时，指定角度的直线与画布边界的交点，再把这个点转换回Canvas的左上角原点坐标系即可。Canvas的旋转操作本质是让坐标系转了角度，反过来直接计算目标角度的直线在原坐标系的交点，结果完全一致。

几何公式与步骤 #

1. 角度转弧度：rad = degrees * Math.PI / 180（Canvas API统一使用弧度计算角度）
2. 切换中心坐标系：把画布左上角原点(0,0)转换为中心原点(w/2, h/2)，此时画布四个边界的坐标为：
   • 左边界：x = -w/2
   • 右边界：x = w/2
   • 上边界：y = -h/2
   • 下边界：y = h/2
3. 计算直线与边界的交点：
   • 设直线斜率 k = Math.tan(rad)
   • 分情况处理：
     • 水平直线（rad=0或π）：直接取右边界点(w/2, 0)或左边界点(-w/2, 0)
     • 垂直直线（rad=π/2或3π/2）：直接取下边界点(0, h/2)或上边界点(0, -h/2)
     • 普通斜线：
       1. 计算直线与左右边界的交点，检查y值是否在[-h/2, h/2]范围内
       2. 计算直线与上下边界的交点，检查x值是否在[-w/2, w/2]范围内
       3. 从有效交点中，取离中心最远的那个（即与角度方向完全匹配的边界交点）
4. 转换回Canvas坐标系：把中心坐标系的(x, y)转换为Canvas左上角原点的坐标：
   x_canvas = x + w/2，y_canvas = y + h/2

修改后的完整代码 #

<canvas width="910" height="300"></canvas>

<style>
canvas{
    width:100%;
    height:300px;
    outline:1px solid red;
}
</style>

<script>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

let w = canvas.clientWidth;
let h = canvas.clientHeight;

let line_width = 1;
let degrees = 45;
let rad = degrees * (Math.PI/180);  

ctx.lineWidth = line_width;
ctx.setLineDash([5,20]);
ctx.strokeStyle = 'red';

let x_1 = w/2;
let y_1 = h/2;

// 封装交点计算逻辑
function getBoundaryIntersection(w, h, rad) {
    const halfW = w / 2;
    const halfH = h / 2;
    const k = Math.tan(rad);
    
    // 处理水平/垂直特殊角度（加误差判断避免浮点数精度问题）
    if (Math.abs(rad % Math.PI) < 0.0001) {
        return rad === 0 ? [halfW, 0] : [-halfW, 0];
    }
    if (Math.abs(rad % Math.PI - Math.PI/2) < 0.0001) {
        return rad === Math.PI/2 ? [0, halfH] : [0, -halfH];
    }
    
    // 收集所有合法交点
    const candidates = [];
    // 右边界交点
    const yRight = k * halfW;
    if (yRight >= -halfH && yRight <= halfH) candidates.push([halfW, yRight]);
    // 左边界交点
    const yLeft = k * (-halfW);
    if (yLeft >= -halfH && yLeft <= halfH) candidates.push([-halfW, yLeft]);
    // 下边界交点
    const xBottom = halfH / k;
    if (xBottom >= -halfW && xBottom <= halfW) candidates.push([xBottom, halfH]);
    // 上边界交点
    const xTop = (-halfH) / k;
    if (xTop >= -halfW && xTop <= halfW) candidates.push([xTop, -halfH]);
    
    // 筛选出距离中心最远的点（即目标方向的交点）
    let maxDist = 0;
    let target = [0,0];
    candidates.forEach(([x,y]) => {
        const dist = x*x + y*y;
        if (dist > maxDist) {
            maxDist = dist;
            target = [x,y];
        }
    });
    return target;
}

// 获取交点并转换为Canvas坐标系
const [centerX, centerY] = getBoundaryIntersection(w, h, rad);
let x_2 = centerX + w/2;
let y_2 = centerY + h/2;

// 绘制原始参考直线
ctx.beginPath();
ctx.moveTo(x_1, y_1);
ctx.lineTo(w, h);
ctx.stroke();

// 绘制旋转后的目标直线
ctx.translate(w/2,h/2);
ctx.rotate(rad);
ctx.translate(-w/2,-h/2);

ctx.beginPath();
ctx.moveTo(x_1, y_1);
ctx.lineTo(x_2, y_2);
ctx.stroke();
</script>

说明 #

• 函数getBoundaryIntersection封装了所有计算逻辑，传入画布宽高和角度弧度即可返回中心坐标系下的交点
• 加入了角度误差判断，避免因浮点数精度问题导致的计算错误
• 最终的交点坐标直接适配Canvas的旋转坐标系，绘制时无需额外调整

内容的提问来源于stack exchange，提问作者Bahurtsev