Canvas绘制非预期点：技术问题排查与原因问询

你的猜测不对——Canvas上下文的颜色切换是同步的，不存在“速度慢于矩形绘制”的情况。JavaScript是单线程执行模型，每一行代码都会按顺序完成后再执行下一行，所以设置fillStyle之后调用fillRect，一定会使用你设置的样式绘制。

导致矩形外部出现可见点的核心原因是代码中的两个关键错误：

1. 颜色函数c2的随机索引越界 #

看你的c2函数实现：

const c2 = ( alpha ) => {
    let colors = [ 'rgba(78,9,12,' + alpha + ')', 'rgba(161,34,19,' + alpha + ')', 'rgba(171,95,44,' + alpha + ')', 'rgba(171,95,44,' + alpha + ')', 'rgba(252,160,67,' + alpha + ')' ]
    return colors[ Math.round(Math.random() * colors.length ) ];
}

• colors数组的长度是5，合法索引范围是0~4
• Math.random() * colors.length会生成0~5之间的随机数，经过Math.round()处理后，可能得到0,1,2,3,4,5这六个值
• 当索引为5时，colors[5]是undefined，Canvas会将undefined的填充样式默认解析为不透明的黑色（#000000），这就导致原本应该绘制透明点的矩形外部区域，出现了黑色的可见点。

2. 像素坐标的边界判断遗漏 #

当随机生成的p.x或p.y超出templateCanvas的范围（比如p.x >= 800或p.y >= 800），调用tctx.getImageData(p.x, p.y, 1, 1)会返回全透明的像素数据（imgData的四个值都是0），此时会触发c2(0)的调用。但因为上面的索引越界问题，依然会意外绘制出黑色点。

修复方案 #

修正颜色函数的索引计算 #

把Math.round()改成Math.floor()，确保随机索引始终落在合法范围内：

const c2 = ( alpha ) => {
    let colors = [ 'rgba(78,9,12,' + alpha + ')', 'rgba(161,34,19,' + alpha + ')', 'rgba(171,95,44,' + alpha + ')', 'rgba(171,95,44,' + alpha + ')', 'rgba(252,160,67,' + alpha + ')' ]
    // 使用Math.floor确保索引在0~4之间
    return colors[ Math.floor(Math.random() * colors.length ) ];
}

增加坐标边界检查 #

在获取像素数据前，先判断坐标是否在画布有效范围内，避免获取无效的透明像素：

sites.forEach( p => {
    // 确保坐标在templateCanvas的有效范围内
    if (p.x < 0 || p.x >= max.x || p.y < 0 || p.y >= max.y) {
        ctx.fillStyle = c2(0);
    } else {
        let imgData = tctx.getImageData(p.x, p.y, 1, 1).data;
        ctx.fillStyle = ( imgData[0] == 255 ) ? c2(1) : c2(0);
    }
    ctx.fillRect(p.x, p.y, 2, 2)
} );

这样就能彻底解决矩形外部出现可见点的问题了。

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