Question

我看到这篇文章：Combining two or more Canvas elements with some sort of blending，我正在尝试将我的2幅画布合并为一张图片下载。我的一个输入画布中有一个.drawImage函数。即使有我的形象，还有办法轻松地将2幅画布合并为1张吗？

这是我的代码：

<!DOCTYPE html>
<html>
<body>

<canvas id="canvas1" width="350" height="350" style="border: 1px solid black"></canvas>

<canvas id="canvas2" width="350" height="350" style="border: 1px solid black"></canvas>

<canvas id="canvas3" width="350" height="350" style="border: 1px solid black"></canvas>

<script>
var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');
var img1 = new Image();

img1.onload = function() {
ctx.drawImage(img1, 0, 0);
};

img1.src = 'red.png'


var can2 = document.getElementById('canvas2');
var ctx2 = can2.getContext('2d');

ctx2.beginPath();
ctx2.fillStyle = "pink";
ctx2.arc(50, 50, 50, 0, Math.PI * 2, 1);
ctx2.fill();
ctx2.beginPath();
ctx2.clearRect(20, 40, 60, 20);

var can3 = document.getElementById('canvas3');
var ctx3 = can3.getContext('2d');

ctx3.drawImage(can, 0, 0);
ctx3.drawImage(can2, 0, 0);
</script>

</body>
</html>

谢谢，AppleManYT

Answer 1

是的，即使您的图像也可以轻松地将2幅画布合并为1，为了实现这一点，您只需将此ctx3.drawImage(can, 0, 0)）代码放在img1.onload函数中。

＆＃13;

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

var img1 = new Image();
img1.src = 'http://cdn2.boothedog.net/wp-content/uploads/2011/07/boo-the-dog-naked-wednesday--150x150.jpg';
img1.onload = function() {
    ctx.drawImage(img1, 0, 0);
    ctx3.drawImage(can, 0, 0);
};

var can2 = document.getElementById('canvas2');
var ctx2 = can2.getContext('2d');

ctx2.beginPath();
ctx2.fillStyle = "pink";
ctx2.arc(50, 50, 50, 0, Math.PI * 2, 1);
ctx2.fill();
ctx2.clearRect(20, 40, 60, 20);

var can3 = document.getElementById('canvas3');
var ctx3 = can3.getContext('2d');

ctx3.drawImage(can2, 200, 25);

＆＃13;

<canvas id="canvas1" width="350" height="150" style="border: 1px solid black"></canvas>
<canvas id="canvas2" width="350" height="150" style="border: 1px solid black"></canvas>
<canvas id="canvas3" width="350" height="150" style="border: 1px solid black"></canvas>

＆＃13;

Answer 2

画布..你可以画的图像。

画布只是一个图像，可以像图像一样渲染到另一个画布。

因为画布是双缓冲的（当您渲染渲染到屏幕外缓冲区时），您可以将画布渲染到自身。

你也可以使用画布代替DOM标签（我看到很多人将画布转换为dataURL只是为了放置在DOM上，这是非常低效的内存）

一般规则是如果你可以用图像做，你也可以使用画布。

尝试将2个HTML画布与输入画布中的.drawImage函数合并为1

2 个答案:

画布..你可以画的图像。