javascript - 将多个屏幕外 Canvas 绘制到屏幕 Canvas 上

Question

当我尝试将多个屏幕外 Canvas 渲染到屏幕 Canvas 中时遇到问题。我确实渲染了一个离屏 Canvas ，但问题是之前应该渲染过另外两个 Canvas 。换句话说，仅渲染最后一个 Canvas 。预期的结果将是三个重叠的红色、绿色和蓝色矩形(或正方形:)。代码如下:

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;
}

我做了一些搜索，似乎我不是第一个遇到这个问题的人，但我无法让它正常工作。

Answer 1

设置 Canvas 高度或宽度会清除 Canvas 。

代码的问题是，当您在函数 draw 中设置屏幕 Canvas 大小时，会导致屏幕 Canvas 被清除

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

您的绘图函数

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);
}

要避免这种情况，只需设置一次 Canvas 大小即可。如果您需要调整 Canvas 大小并保留其内容，您首先需要创建 Canvas 的副本，然后调整其大小，然后将副本渲染回原始状态。

演示展示了将 5 个离屏 Canvas 渲染到一个屏幕 Canvas 上。

const colours = ['#f00', '#ff0', '#0f0', '#0ff', '#00f'];
const ctx = can.getContext('2d');
can.width = innerWidth - 4;  // sub 4 px for border
can.height = innerHeight - 4;

function createCanvas(color, i) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = 150;
  canvas.height = 150;
  ctx.font = "24px arial";
  ctx.fillStyle = color;
  ctx.fillRect(0, i * 30, canvas.width, 30);
  ctx.fillStyle = "black";
  ctx.fillText("Canvas "+i,10,(i + 0.75) * 30);
  return canvas;
}
colours.forEach((c, i) => {
  ctx.drawImage(createCanvas(c, i), 0, 0);
})

canvas {
  border: 2px solid black;
  position : absolute;
  top : 0px;
  left : 0px;
}

<canvas id="can"></canvas>