Canvas JavaScript 像素操作绘制图片边角三角形的逻辑错误排查

• 像素数组索引的单位混淆：Canvas的ImageData数组每4个连续值对应一个像素的R/G/B/A通道，你之前计算内层循环的终止位置时，把「像素长度」和「数组通道偏移量」混算了，导致斜边斜率、三角宽度完全不符合几何预期
  原代码内层循环终止条件写为 ((y * imgData.width * 4) + (n * 2)) - y，这里的计算逻辑存在两处偏差：
  1. 水平方向的偏移量没有乘以单像素占的4个通道位，直接用像素数当数组偏移值
  2. 三角斜边的宽度递减逻辑没有匹配实际的数组步长，导致每一行的涂红宽度和预期的直角三角形状偏差极大
• 缺少像素回写步骤：你修改完arr数组的值后，没有调用putImageData把修改后的图像数据重新写回Canvas，就算逻辑对了画面也不会更新

// 获取Canvas图像数据
let imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
let arr = imgData.data;

// 计算直角三角的直角边长度n
let n;
if (width > height) {
    n = height / 20;
} else {
    n = width / 20;
}

// 左上角绘制红色直角三角
for (let y = 0; y < Math.floor(n); y++) {
    const rowStartOffset = y * imgData.width * 4;
    // 每向下一行，水平涂红的宽度减少1个像素，形成斜边
    const redPixelCountInRow = Math.floor(n - y);
    for (let x = 0; x < redPixelCountInRow; x++) {
        const pixelOffset = rowStartOffset + x * 4;
        arr[pixelOffset] = 255;
        arr[pixelOffset + 1] = 0;
        arr[pixelOffset + 2] = 0;
    }
}

// 将修改后的像素数据回写到Canvas
ctx.putImageData(imgData, 0, 0);

• 按照直角三角的几何规则构建循环：y方向从0走到n的位置，x方向从0走到n-y的位置，刚好形成两条直角边分别贴住图片上边缘、左边缘，斜边从(0,n)延伸到(n,0)的红色直角三角，和预期形状完全匹配
• 所有偏移计算统一对齐数组的4通道单位，避免像素位置错位
• 对n做整数取整，消除小数像素带来的绘制锯齿

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