基于 canvas.getImageDat 的矩形分区算法。

var canvas20210510 = document.getElementById('canvas20210510')
var canvas202105102D = document.getElementById('canvas20210510').getContext("2d")
const canvas20210510getImageData = canvas202105102D.getImageData(0, 0, canvas20210510.width, canvas20210510.height)
for (let i = 0; i < canvas20210510getImageData.data.length; i += 4) {
    const nowLocation = i/4 + 1
    const nowX = (nowLocation%canvas20210510.width)
    const nowY = parseInt(nowLocation/canvas20210510.width)
    if(nowX> (canvas20210510.width/2) && nowY<(canvas20210510.height/2)){
        // console.log(nowLocation,nowX)
        canvas20210510getImageData.data[i] = 123;
        canvas20210510getImageData.data[i + 1] = 200;
        canvas20210510getImageData.data[i + 2] = 255;
        canvas20210510getImageData.data[i + 3] = 255;
    }
    if(nowX< (canvas20210510.width/2) && nowY<(canvas20210510.height/2)){
        // console.log(nowLocation,nowX)
        canvas20210510getImageData.data[i] = 0;
        canvas20210510getImageData.data[i + 1] = 100;
        canvas20210510getImageData.data[i + 2] = 30;
        canvas20210510getImageData.data[i + 3] = 255;
    }
    if(nowX< (canvas20210510.width/2) && nowY>(canvas20210510.height/2)){
        // console.log(nowLocation,nowX)
        canvas20210510getImageData.data[i] = 255;
        canvas20210510getImageData.data[i + 1] = 0;
        canvas20210510getImageData.data[i + 2] = 0;
        canvas20210510getImageData.data[i + 3] = 255;
    }
    if(nowX> (canvas20210510.width/2) && nowY>(canvas20210510.height/2)){
        // console.log(nowLocation,nowX)
        canvas20210510getImageData.data[i] = 0;
        canvas20210510getImageData.data[i + 1] = 0;
        canvas20210510getImageData.data[i + 2] = 0;
        canvas20210510getImageData.data[i + 3] = 255;
    }
}
canvas202105102D.putImageData(canvas20210510getImageData, 0, 0);