Javascript 永久更改画布图像的尺寸，而不保留纵横比

我在画布上创建一个渐变，生成一个PNG文件，然后下载它。我想要一个径向梯度，它是一个椭圆。因为画布渐变必须是圆，所以我将渐变生成为圆，然后调整画布元素的大小以创建椭圆。这很好，视觉生成的图像是我想要的椭圆

当我去下载生成的画布时，它使用的是画布的全尺寸，而不是css样式的尺寸，因此我得到了原始的全尺寸圆圈。有没有办法改变画布图像的尺寸而不保持纵横比？所有出现在主题上的SO帖子都希望保持纵横比

制作画布； 缩放； var input=document.createElementinput； input.type=按钮； input.style.display=块； input.value=将画布下载到PNG； input.onclick=函数{ var canvas=document.getElementByIdcanvas； 下载URIcanvas.toDataURLimage/png，gradient.png； } document.body.appendChildinput； var input=document.createElementinput； input.type=按钮； input.style.display=块； input.value=下载比例； input.onclick=函数{ var canvas=document.getElementByIdscaled； 下载URIcanvas.toDataURLimage/png，gradient.png； } document.body.appendChildinput； 函数makeCanvas{ var画布梯度； var-ctx； 宽度=200； 高度=200； var canvas=document.createElementcanvas； canvas.id=画布； canvas.style.width=宽度+px； canvas.style.height=高度+px； 画布宽度=宽度； canvas.height=高度； ctx=canvas.getContext'2d'； var梯度； //两个圆必须共享画布的中心 变量坐标={ x1:0， y1:0， x2:0， y2:0 }; coords.x1=宽度/2； coords.x2=coords.x1； 坐标y1=高度/2； coords.y2=coords.y1； //内圈就是中心-一个点 coords.r1=0； //外圆是边缘 coords.r2=数学最小高度、宽度； 梯度=ctx.createRadialGradientcoords.x1，coords.y1，coords.r1，coords.x2，coords.y2，coords.r2； gradient.addColorStop0，白色； gradient.addColorStop1，黑色； ctx.fillStyle=渐变； ctx.fillRect0，0，宽度，高度； canvas.style.width=宽度/2+px； document.body.appendcanvas； can=ctx； //document.body.appendcan； } 函数downloadURIuri，name{ var link=document.createElementa； link.download=名称； link.href=uri； document.body.appendChildlink； link.click； document.body.removeChildlink； 删除链接； } 函数{ var can=document.createElementcanvas； can.id=can； can.width=Math.floorcanvas.width/2； can.height=canvas.height； can.ctx=can.getContext2d； can.ctx.drawImagecanvas，0，0，can.width，can.height； canvas.width=can.width； canvas.height=can.height； ctx.drawImagecan，0,0； 还可以； } 功能标度{ var canvas=document.createElementcanvas； canvas.id=缩放； canvas.style.width=200px； canvas.style.height=200px； 画布宽度=200； 画布高度=200； ctx=canvas.getContext'2d'； var梯度； var g=ctx.createRadialGradient100100,01000100； g、 addColorStop0，白色 g、 addColorStop1，红色 ctx.fillStyle=g ctx.刻度0.5，1//刻度x轴0.5 ctx.fillRect0，0，200，200//沿x方向挤压的渐变圆 document.body.appendcanvas； }使用变换更改渐变的形状。 对于您的信息，渐变圆可以转换为椭圆

var g = ctx.createRadialGradient(200,200,0,200,200,200)
g.addColorStop(0,"red")
g.addColorStop(1,"white")
ctx.fillStyle = g
ctx.scale(0.5,1) // scale x axis 0.5
ctx.fillRect(0,0,400,400)  // gradient circle squashed along x

缩放画布 创建第二个画布

// assuming canvas , ctx is the original canvas and context
var can = document.createElement("canvas");

制定决议

can.width = Math.floor(canvas.width / 2);
can.height = canvas.height;

获取上下文并在新画布上绘制原始内容

can.ctx = can.getContext("2d");
can.ctx.drawImage(canvas,0,0,can.width,can.height);

将原始画布设置为新大小

canvas.width = can.width;
canvas.height = can.height;

在缩放后的罐上绘制到原始画布上

ctx.drawImage(can,0,0);
can = undefined; // reference to dump temp canvas

---

您现在拥有画布比例，但仍保留内容。你也可以用新的画布替换旧的画布

我觉得很烦人，你的示例代码只是继续下载到我的计算机上。您可能应该把它放在一个按钮中。@JDB说得对。将修复。@JDB-fixed。现在只需按下按钮即可下载。谢谢你的建议，谢谢。我已经在添加第二个画布时使用了它。您关于设置比例的第一句话可能会简单得多，但是当我下载创建的PNG时，尽管图像的比例正确，但文件的宽度是两倍，而右半部分是空白的。在我的示例中，我将缩放代码添加到底部，并添加为第二个按钮以显示下载的图像。是否有任何方法可以在不经过其他画布的情况下获得正确的文件尺寸？@mseifert要更改画布大小并保留内容，需要第二个画布，或者可以使用getImageData和putImageData。绘制您需要的，然后var data=ctx.getImageData0,0，width/2，height；ctx.canvas.width/=2；ctx.putImageDatadata，0,0；是的-getImageData和putImageData正是我所希望的。短波和短波 伊特！再次感谢。