如何使用drawImage方法在canvas上绘制画布？

Question

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




const network = document.createElement('canvas')
const ctx_network = network.getContext('2d');
ctx_network.fillStyle = 'red';
ctx_network.fillRect(0, 0, 250, 250);
ctx_network.fillStyle = 'green';
ctx_network.fillRect(250, 250, 250, 250);
ctx_network.fillStyle = 'aqua';
ctx_network.fillRect(0, 250, 250, 250);
ctx_network.fillStyle = 'violet';
ctx_network.fillRect(250, 0, 250, 250);

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.drawImage(network, 200, 200, 200, 200, 0, 0, 200, 200);

为什么我没有显示任何东西？

我在 drawImage 方法中指定了值，以查看我在其上绘制了 4 个正方形的画布中间，但我没有看到它们中的任何一个。

Answer 1

drawImage()

函数将图像作为第一个参数，但您给了它一个画布元素。你应该给它一个

<img>

元素。

Answer 2

当前实现的问题是您试图使用带有错误参数的 drawImage 方法将网络画布绘制到 canvas 画布上。 drawImage 方法的第二个、第三个、第四个和第五个参数指定要绘制的源画布部分，而最后两个参数指定目标位置和大小。

在你的例子中，你指定源画布（网络）从位置（200, 200）和大小（200, 200）开始绘制，这是在源画布的边界之外，并试图在目标上绘制它画布 (canvas) 从位置 (0, 0) 开始，大小 (200, 200)。这导致了您在目标画布上看不到任何东西的问题。

要将网络画布以正确的大小和位置绘制到canvas画布上，需要调整drawImage方法的参数。这是一个更新的实现：

const network = document.createElement('canvas');
const ctx_network = network.getContext('2d');
ctx_network.fillStyle = 'red';
ctx_network.fillRect(0, 0, 250, 250);
ctx_network.fillStyle = 'green';
ctx_network.fillRect(250, 250, 250, 250);
ctx_network.fillStyle = 'aqua';
ctx_network.fillRect(0, 250, 250, 250);
ctx_network.fillRect(250, 0, 250, 250);

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// Specify the position and size of the source canvas to draw
const sx = 0;
const sy = 0;
const sWidth = network.width;
const sHeight = network.height;

// Specify the position and size of the destination canvas to draw
const dx = 50;
const dy = 50;
const dWidth = 100;
const dHeight = 100;

// Draw the source canvas onto the destination canvas
ctx.drawImage(network, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);