Question

我在画布上使用了scale（）函数，但是我不确定它是如何工作的，因为它似乎无法按照您认为的方式工作。我只想将图像放大两倍。

const imageData = tempcanv.getContext('2d').getImageData(0, 0, tempcanv.width, tempcanv.height);
const canvas2 = document.createElement("canvas");
const ctx2 = canvas2.getContext('2d');
canvas2.width = tempcanv.width * 2, canvas2.height = tempcanv.height * 2;
ctx2.scale(2, 2);
ctx2.putImageData(imageData, 0, 0);

这只是使图像位于更大的画布中，但是图像大小本身并没有改变。这不是scale（）应该做什么，还是我做错了其他事情？

Answer 1

使用putImageData不受画布上当前转换的影响-在您的情况下scale不会有任何效果。

相反，您可以使用drawImage函数以所需的比例将临时画布绘制到其他画布上，例如：

...
// Syntax: ctx.drawImage(image, dx, dy, dWidth, dHeight);
ctx2.drawImage(tempcanv, 0, 0, tempcanv.width * 2, tempcanv.height * 2);
...

这是一个将一个画布绘制到另一个画布上的基本示例。

var canv1 = document.getElementById('canvas1');
var canv2 = document.getElementById('canvas2');
// Draw a rect on our source canvas as an example image
canv1.getContext('2d').fillRect(1, 1, 40, 40);
// Draw our first canvas onto our second at 2x
canv2.getContext('2d').drawImage(canv1, 0, 0, canv1.width * 2, canv1.height * 2);

<div>
  <canvas id="canvas1" width="100" height="100"></canvas>
</div>
<div>
  <canvas id="canvas2" width="200" height="200"></canvas>
</div>

Javascript Canvas如何按比例放大图像

1 个答案: