如何让Canvas与Math.random()生成的图形位置完美适配？

问题说明 #

我有一个固定宽高（1024x576）的Canvas，但设置圆形和矩形的x、y位置时，图形总会超出画布范围。怀疑是Math.random()的范围计算有误。目前矩形代码刚开始编写，Start/Stop按钮还在开发，优先解决圆形的位置问题。目标是生成随机位置、颜色、尺寸的圆形和矩形并统计数量。

问题根源 #

你的圆形位置计算逻辑错误，导致取值范围超出画布边界：
原代码中centerX/centerY的计算公式错误，会出现中心位置过偏的情况，比如当radius较大时，圆形边缘会超出画布。正确的逻辑是：图形的任何部分都不能超出画布边界，对于圆形来说，中心到画布边缘的距离至少要等于半径；对于矩形来说，左上角坐标加上宽高不能超过画布宽高。

修正后的代码 #

修复圆形位置计算 #

const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');
const canvasWidth = 1024;
const canvasHeight = 576;

// 给Canvas设置实际宽高，避免默认尺寸拉伸
canvas.width = canvasWidth;
canvas.height = canvasHeight;

const circleCounter = document.querySelector('#circle-counter');
const rectangleCounter = document.querySelector('#rectangle-counter');

const start = document.querySelector('#start');
const stop = document.querySelector('#stop');

let rectCount = 0;
let circCount = 0;
let circleIntervalId = null;

function draw() {
    // 避免重复点击Start创建多个定时器
    if (!circleIntervalId) {
        circleIntervalId = setInterval(drawCircle, 500);
    }
}

function drawCircle() {
    // 生成随机十六进制颜色，补全6位确保有效性
    let randomColor = Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0');
    let color = "#" + randomColor;
    
    let radius = Math.round(Math.random() * 15 + 15); // 半径范围15-30

    // 正确的中心位置计算：确保圆形完全在画布内
    // 范围：radius ≤ centerX ≤ canvasWidth - radius
    let centerX = Math.round(Math.random() * (canvasWidth - 2 * radius) + radius);
    let centerY = Math.round(Math.random() * (canvasHeight - 2 * radius) + radius);

    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
    ctx.fillStyle = color;
    ctx.fill();
    ctx.lineWidth = 1;
    ctx.strokeStyle = "black";
    ctx.stroke();

    circCount++;
    circleCounter.innerHTML = circCount;
}

补全并修复矩形代码 #

function drawRectangle() {
    let randomColor = Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0');
    let color = "#" + randomColor;

    let rectangleWidth = Math.round(Math.random() * 15 + 15); // 宽度15-30
    let rectangleHeight = Math.round(Math.random() * 15 + 15); // 高度15-30

    // 左上角坐标范围：确保矩形右下角不超出画布
    // 范围：0 ≤ cornerX ≤ canvasWidth - rectangleWidth
    let cornerX = Math.round(Math.random() * (canvasWidth - rectangleWidth));
    let cornerY = Math.round(Math.random() * (canvasHeight - rectangleHeight));

    ctx.fillStyle = color;
    ctx.fillRect(cornerX, cornerY, rectangleWidth, rectangleHeight);
    ctx.lineWidth = 1;
    ctx.strokeStyle = "black";
    ctx.strokeRect(cornerX, cornerY, rectangleWidth, rectangleHeight);

    rectCount++;
    rectangleCounter.innerHTML = rectCount;
}

补充Stop按钮功能（可选） #

stop.addEventListener('click', function() {
    if (circleIntervalId) {
        clearInterval(circleIntervalId);
        circleIntervalId = null;
    }
    // 如果后续启用矩形定时器，同理清除
});

关键修正点 #

1. 圆形位置：通过Math.random() * (canvasWidth - 2 * radius) + radius确保中心位置在[radius, canvasWidth - radius]区间，保证圆形边缘不超出画布。
2. 矩形位置：通过Math.random() * (canvasWidth - rectangleWidth)确保左上角x坐标最大为canvasWidth - rectangleWidth，保证矩形右下角不超出画布。
3. 颜色补全：使用padStart(6, '0')补全随机生成的十六进制颜色，避免出现长度不足的无效颜色代码。
4. Canvas尺寸：给Canvas元素设置实际宽高，避免默认尺寸被CSS拉伸导致图形变形。

内容的提问来源于stack exchange，提问作者That New Coder