Question

我的HTML页面上有两个画布，我真正想要做的是将所有内容粘贴到第二个画布右下角的第一个画布中。这是我尝试的代码：

<canvas id="first"></canvas>
<canvas id="second"></canvas>
<script>
var first = document.getElementById('first').getContext('2d');
var sec = document.getElementById('second').getContext('2d');

//--code for drawing in first canvas--

var img = new Image();
img.src="imgName.jpg";
img.onload = function() {
    sec.drawImage(img,0,0,sec.canvas.width,sec.canvas.height);

//Actually i want first canvas to overlap image on second canvas

    var paste = new Image();
    paste.src = first.canvas;
    paste.onload = function() {

        sec.drawImage(paste,100,100,400,600);

    };
};
</script>

问题是：第二个画布显示图像但不显示右下角的第一个画布。

请有价值的家伙，我需要答案。这很重要。感谢所有帮助者..

Answer 1

在第二个画布上绘制第一个画布的方式不正确。您可以使用drawImage()方法在另一个画布上直接绘制画布。

var first = document.getElementById('first').getContext('2d');
var sec = document.getElementById('second').getContext('2d');

// draw on first canvas
first.fillStyle = '#07C';
first.fillRect(0, 0, first.canvas.width, first.canvas.height);

// draw image on second canvas
var img = new Image();
img.src = "http://lorempixel.com/300/300";
img.onload = function() {
   sec.drawImage(img, 0, 0, sec.canvas.width, sec.canvas.height);
   sec.drawImage(first.canvas, 100, 100, 100, 100); // draw first canvas on a portion of second canvas
};

body {display: flex}

<canvas id="first" width="200" height="200"></canvas>
<canvas id="second" width="200" height="200"></canvas>

在另一个画布的角落内复制并粘贴一个画布

1 个答案: