<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 个正方形的画布中间,但我没有看到它们中的任何一个。
当前实现的问题是您试图使用带有错误参数的 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);