Javascript画布如何放大图像

我将scale（）函数用于canvas，但我不确定它是如何工作的，因为它似乎不像您想象的那样工作。我只想将图像放大两倍

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（）应该做的，还是我做错了什么？

使用

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'）；
//在源画布上绘制一个矩形作为示例图像
canv1.getContext（'2d'）.fillRect（1,1,40,40）；
//以2倍的速度将第一张画布绘制到第二张画布上
canv2.getContext（'2d'）.drawImage（canv1，0，0，canv1.width*2，canv1.height*2）
使用
putImageData
它不受画布上当前变换的影响-在您的情况下，
缩放将不会产生任何效果

相反，您可以使用
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'）；
//在源画布上绘制一个矩形作为示例图像
canv1.getContext（'2d'）.fillRect（1,1,40,40）；
//以2倍的速度将第一张画布绘制到第二张画布上
canv2.getContext（'2d'）.drawImage（canv1，0，0，canv1.width*2，canv1.height*2）

我注意到您没有使用scale（）…scale的确切用途是什么？我见过其他关于使用画布缩放的问题，他们也没有使用scale函数。它的存在有什么目的吗？我的意思是，为什么规模没有效果？我似乎能够在不使用drawImage的情况下对画布进行各种操作，putImageData总是很好。是否在DOM中添加
canvas2
？在您的示例中，您使用代码创建它，但不显示它是如何添加到页面的。虽然
缩放
不适用于像素数据操作（
get/putImageData
），但它的作用是应用影响画布上后续绘制功能的变换。在我的示例中，我使用了目标宽度/高度为2x的
drawImage
，但您也可以在
drawImage
之前应用
scale
，它会更改绘制它的比例。因此我可以在drawImage之前添加scale（）？但是它已经被放大了，那还能做什么呢？你可以用它来代替画2x的图像（提供2x的目标宽度和高度）。例如，如果您想以2x执行多个绘制操作，可以使用
scale
，然后以原始比例执行绘制（即
canv2.getContext（'2d'）。drawImage（canv1，0，0）
），让变换处理缩放。对于单个图像绘制来说，这是一个不必要的步骤。我注意到你没有使用scale（）…scale到底是用来做什么的？我见过其他关于使用画布缩放的问题，他们也没有使用scale函数。它的存在有什么目的吗？我的意思是，为什么规模没有效果？我似乎能够在不使用drawImage的情况下对画布进行各种操作，putImageData总是很好。是否在DOM中添加
canvas2
？在您的示例中，您使用代码创建它，但不显示它是如何添加到页面的。虽然
缩放
不适用于像素数据操作（
get/putImageData
），但它的作用是应用影响画布上后续绘制功能的变换。在我的示例中，我使用了目标宽度/高度为2x的
drawImage
，但您也可以在
drawImage
之前应用
scale
，它会更改绘制它的比例。因此我可以在drawImage之前添加scale（）？但是它已经被放大了，那还能做什么呢？你可以用它来代替画2x的图像（提供2x的目标宽度和高度）。例如，如果您想以2x执行多个绘制操作，可以使用
scale
，然后以原始比例执行绘制（即
canv2.getContext（'2d'）。drawImage（canv1，0，0）
），让变换处理缩放。但对于单个图像绘制，这是一个不必要的步骤。