画布中的绘图图像会删除Fll背景

Question

从画布导出图像之前，我创建了一个新的画布，在其中进行了一些操作（裁剪等）。 在此新画布中，我将背景填充为蓝色，以便在导出图像时背景为蓝色。 但是，当我将第一个画布中的图形放入时，它会使背景的某些部分透明。 我该如何解决？

这是第一个画布上的绘图：

这就是我想要的：

但是我得到以下信息：

这是我的代码部分：

//Create Copy of Canvas
var copyOfContext = document.createElement('canvas').getContext('2d');
copyOfContext.canvas.width = c.width;
copyOfContext.canvas.height = c.height;
copyOfContext.fillStyle = "yellow";
copyOfContext.fillRect(0, 0, c.width, c.height);
copyOfContext.putImageData(trimmedRect, 0, 0);

croppedImageURL = copyOfContext.canvas.toDataURL("image/png");

编辑：之所以我不在第一个画布中这样做是因为，我对它有一个特定的外观以适合网页，因此我正在使用第二个画布来获得所需的结果和颜色。 :)

Answer 1

要从画布复制到画布，只需使用drawImage 。

该演示显示了如何完成。

 var can1 = document.createElement("canvas"); var can2 = document.createElement("canvas"); can1.width = can2.width = 200; can1.height = can2.height = 200; can1.ctx = can1.getContext("2d"); can2.ctx = can2.getContext("2d"); can1.ctx.fillStyle = "yellow"; can1.ctx.fillRect(0,0,200,200); can2.ctx.strokeStyle = "black"; can2.ctx.lineWidth = 5; can2.ctx.strokeRect(40,40,120,120); document.body.appendChild(can1); document.body.appendChild(can2); can1.ctx.drawImage(can2,30,30,140,140,30,30,140,140);