我在 Canvas 上使用了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);
这只是使图像位于更大的 Canvas 内,但图像大小本身并没有改变。这不是scale()应该做的事情还是我做错了什么?
最佳答案
使用 putImageData
它不会受到 Canvas 上当前转换的影响 - 在您的情况下,scale
将不会产生任何效果。
相反,您可以使用drawImage
函数以所需的比例将临时 Canvas 绘制到其他 Canvas 上,例如:
...
// Syntax: ctx.drawImage(image, dx, dy, dWidth, dHeight);
ctx2.drawImage(tempcanv, 0, 0, tempcanv.width * 2, tempcanv.height * 2);
...
<小时/>
这是一个将一个 Canvas 绘制到另一个 Canvas 上的基本示例。
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如何放大图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56345655/