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

问题描述 投票:0回答:2
<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 个正方形的画布中间,但我没有看到它们中的任何一个。

javascript canvas
2个回答
0
投票

drawImage()
函数将图像作为第一个参数,但您给了它一个画布元素。你应该给它一个
<img>
元素。


0
投票

当前实现的问题是您试图使用带有错误参数的 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);
© www.soinside.com 2019 - 2024. All rights reserved.