Javascript 将多个屏幕外画布绘制到屏幕上画布

当我试图将多个屏幕外画布渲染到屏幕上画布时，我遇到了一个问题。我确实得到了一个屏幕外画布渲染，但问题是，应该有两个其他渲染之前。换句话说，只渲染最后一个画布。预期结果将是三个重叠的红色、绿色和蓝色矩形（或正方形：）。代码如下：

function rectangle(color) {
    var offScreenCanvas = document.createElement('canvas');
    var offScreenCtx = offScreenCanvas.getContext('2d');

    var width = offScreenCanvas.width = 150;
    var height = offScreenCanvas.height = 150;

    switch(color) {
        case 1: 
            offScreenCtx.fillStyle='rgb(255,0,0)';
            break;
        case 2:
            offScreenCtx.fillStyle='rgb(0,255,0)';
            break;
        case 3:
            offScreenCtx.fillStyle='rgb(0,0,255)';
            break;
    }

    offScreenCtx.fillRect(0,0,width,height);

return offScreenCanvas;
}

function draw(offScreenCanvas, x , y) {
    var canvas = document.getElementById('canvas')
    var ctx = canvas.getContext('2d');

    var width = canvas.width = window.innerWidth;
    var height = canvas.height = window.innerHeight;

    ctx.drawImage(offScreenCanvas, x, y);
}

var images = [];
var color = 1;

for (var i=0; i<3; i++) {
    var img = new rectangle(color);
    images.push(img);
    color++;
}

var x = 0;
var y = 0;

for (var i = 0; i < images.length; i++) {
    draw(images[i], x, y);
    x += 100;
    y += 100;
}

函数矩形（颜色）{
var offScreenCanvas=document.createElement（'canvas'）；
var offScreenCtx=offScreenCanvas.getContext（'2d'）；
变量宽度=偏移CreencAnvas.width=150；
var高度=offScreenCanvas.height=150；
开关（彩色）{
案例1：
offScreenCtx.fillStyle='rgb（255,0,0）'；
打破
案例2：
offScreenCtx.fillStyle='rgb（0255,0）'；
打破
案例3：
offScreenCtx.fillStyle='rgb（0,0255）'；
打破
}
offScreenCtx.fillRect（0,0，宽度，高度）；
返回CreencaNVAS；
}
功能图（偏置屏幕，x，y）{
var canvas=document.getElementById（'canvas'）
var ctx=canvas.getContext（'2d'）；
var width=canvas.width=window.innerWidth；
var height=canvas.height=window.innerHeight；
ctx.drawImage（离屏NVAS，x，y）；
}
var图像=[]；
var-color=1；
对于（var i=0；i设置画布
高度
或
宽度
清除画布。
代码的问题在于，当您在函数
draw

设置画布大小，即使大小相同，也会导致画布上下文重置并清除画布。所有其他画布都会被渲染，但在设置屏幕画布大小时会被擦除

您的
绘图功能

function draw(offScreenCanvas, x , y) {
    var canvas = document.getElementById('canvas')
    var ctx = canvas.getContext('2d');

    // The cause of the problem ===================================
    // Either one of the following lines will clear the canvas
    var width = canvas.width = window.innerWidth;
    var height = canvas.height = window.innerHeight;
    //=============================================================

    ctx.drawImage(offScreenCanvas, x, y);
}

为了避免这种情况，只需设置画布大小一次。如果需要调整画布大小并保留其内容，则首先需要创建画布的副本，然后调整其大小，然后将副本渲染回原始大小

演示显示5个屏幕外画布被渲染到一个屏幕上的画布上


const colors=['#f00'、'#ff0'、'#0f0'、'#0ff'、'#00f']；
const ctx=can.getContext（'2d'）；
can.width=innerWidth-4；//用于边框的sub 4 px
can.height=内部高度-4；
函数createCanvas（颜色，i）{
const canvas=document.createElement（'canvas'）；
const ctx=canvas.getContext（'2d'）；
画布宽度=150；
帆布高度=150；
ctx.font=“24px arial”；
ctx.fillStyle=颜色；
ctx.fillRect（0，i*30，canvas.width，30）；
ctx.fillStyle=“黑色”；
ctx.fillText（“画布”+i，10，（i+0.75）*30）；
返回画布；
}
颜色。forEach（（c，i）=>{
ctx.drawImage（createCanvas（c，i），0，0）；
})
画布{
边框：2件纯黑；
位置：绝对位置；
顶部：0px；
左：0px；
}
ctx.clearRect（canvas.width，canvas.height）
也应该清除画布。@RiazLaskar打字错误，您忘记了坐标，也可以通过上下文获取画布
ctx.clearRect（0，0，ctx.canvas.width，ctx.canvas.height）；