使用p5.js，我构造了一个函数，该函数读取一个二维数组，并使用与每个位置的colors对象的字符串对应的 colored颜色 将其绘制到画布上.这是我的代码:
let colors = {
r: "red",
g: "green",
b: "blue",
y: "yellow",
o: "orange",
bl: "black",
w: "white",
t: "transparent",
i: "indigo",
v: "violet",
c: "cyan",
};
let myMap = [
["r", "o", "y", "g"],
["b", "i", "o", "v"],
["o", "y", "g", "b"],
["i", "v", "r", "o"],
];
function setup() {
createCanvas(400, 400);
}
function draw() {
background(0);
rectMode(CENTER)
readMap(myMap, 50, 50, 150, 150);
}
function readMap(bitmap, x = 0, y = 0, w = null, h = null) {
for (let block of bitmap) {
for (let block2 of block) {
fill(colors[block2]);
noStroke();
push();
translate(x, y);
// If a width and height are specified, render it as a rectangle with that size.
if (w && h) scale(w/width, h/height);
rect(
block.indexOf(block2) * (width / block.length),
bitmap.indexOf(block) * (height / bitmap.length),
width / block.length,
height / bitmap.length
);
pop();
}
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>如果您运行这段代码，它将运行得非常好.它绘制大小和 colored颜色 正确的矩形，但当一行中有两个或两个以上相同 colored颜色 的矩形时-
let myMap = [
// ...
["r", "o", "v", "v"],
];
-第一个副本可以正确渲染，但第二个副本和它后面的所有副本只会渲染为黑色.如果有人能帮上忙，那就是救命稻草了.请注意，我对JavaScript相对比较陌生.