javascript - 如何在数组中声明多个具有不同上下文(ctx)的CANVAS？

Question

我在一个 HTML 文件中使用了多个 CANVAS，我想在一个数组中声明它们。这是(不是数组)声明:

var canvas0 = document.getElementById('canvas0');
var ctxPaint0 = canvas0.getContext('2d');
var canvas1 = document.getElementById('canvas1');
var ctxPaint1 = canvas1.getContext('2d');
var canvas2 = document.getElementById('canvas2');
var ctxPaint2 = canvas2.getContext('2d');
var canvas3 = document.getElementById('canvas3');
var ctxPaint3 = canvas3.getContext('2d');

为了优化它，我尝试使用 For 循环，但它不起作用:

var canvasArray = ["canvas0","canvas1","canvas2","canvas3"]; 
for (var i = 0; i < canvasArray.length; i++) { 

window["canvas"+i] = document.getElementById(canvasArray[i]);
window["ctxPaint"+i] = canvasArray[i].getContext('2d');

}

它输出这个错误:

Uncaught TypeError: canvasArray[i].getContext is not a function

编辑: 感谢 RSchneyer，将字符串数组更改为 Canvas 数组现在可以正常工作:

let canvasArray = Array.from(document.getElementsByTagName("canvas"));
for (var i = 0; i < canvasArray.length; i++) { 

window["canvas"+i] = document.getElementById(canvasArray[i]);
window["ctxPaint"+i] = canvasArray[i].getContext('2d');

}

Answer 1

你可以这样做

const ctxArray = [...document.querySelectorAll('[id^="canvas"]')].map(cvs => cvs.getContext('2d'));

这将导致一个包含所有 Canvas 上下文的数组——这就是您所需要的，因为要从其上下文中获取原始 Canvas ，您所需要的就是:

let i = 0; // or any desired index
const canvas = ctxArray[i].canvas;