是否可以通过for循环引用多个html5画布和变量名？

Question

I have 3 Picture "Names", "Xpositions", "Ypositions", "scale", and "color values" stored in various arrays, like so:

pictureNames["blahblah1, "somePic2", "anotherPic3"];
pictureXcoordinates[0, 43, 56];
pictureYcoordinates[0, 10, 20];
pictureScales[100, 100, 100]; //meaning percent
pictureColorRvalue[0, 0, 0];
pictureColorGvalue[0, 0, 0];
pictureColorBvalue[0, 0, 0];

The PNG images are pre-loaded and assigned in variables as such: picture0, picture1, picture2.

I'm trying to save many lines of coding by making a for loop to draw each picture, with its size and coordinates, into its OWN canvas element, and then colorize them by getting image data. So like this:

var counter;
for(counter = 0; counter <= 2; counter++){
            firstCtx.drawImage(picture1 ,pictureXcoordinates[counter], pictureYcoordinates[counter], picture0.width, picture0.height);
            firstCtx.restore();

            var imgData = firstCtx.getImageData(pictureXcoordinates[counter], pictureYcoordinates[counter], canvasW, canvasH);
                var i;
                for (i = 0; i < imgData.data.length; i += 4) {
                    imgData.data[i] = pictureColorRvalue[counter];
                    imgData.data[i+1] = pictureColorGvalue[counter];
                    imgData.data[i+2] = pictureColorBvalue[counter];
                }
            firstCtx.putImageData(imgData, shapePositionX[counter], shapePositionY[counter]);
            firstCtx.restore();

... but I don't know how to reference "firstCtx", secondCtx", "thirdCtx", using the counter variable.... should/can I rename the canvases contents "canvas1Ctx", "canvas2Ctx", etc.... and reference them with "canvas"+counter+"Ctx", or something like that? And reference "picture0", "picture1", and "picture2" as well.

Answer 1

This is how I would do it: Y would create a class of objects Picture , each with it's x , y etc... and a function that handles the drawing process.

let picturesArray = []

class Picture{
  constructor(x,y,width,height,scale,color,pictureName,canvas){
    this.x = x;
    this.y = y;
    this.w = width;
    this.h = height;
    this.scale = scale;
    this.color = color;
    this.picture = pictureName;
    this.canvas = canvas;
    this.ctx = this.canvas.getContext("2d")
  }

  draw(){
    this.ctx.drawImage(this.picture ,this.x, this.y, this.w, this.h);
    this.imgData = this.ctx.getImageData(this.x, this.y, this.canvas.width, this.canvas.height);
                for (let i = 0; i < imgData.data.length; i += 4) {
                    this.imgData.data[i] = this.color.r;
                    this.imgData.data[i+1] = this.color.g;
                    this.imgData.data[i+2] = this.color.b;
                }
            this.canvas.putImageData(this.imgData, this.x, this.y);
  }
}

Next I would create the objects picture and push the new picture into the pictures array:

picturesArray.push(new Picture(x,y,width,height,scale,color,pictureName,canvas));

Finally you use a for loop or a forEach to draw all the pictures

picturesArray.forEach(p=>{p.draw()})

I hope it helps.