Question

无论我尝试什么，我都无法弄清楚为什么drawImage会垂直拉伸图片。这是代码：

<canvas id="canvas" style="padding:0;border:0;margin:0 auto;
width:320px;height:456px;z-index:0;"></canvas>

<script type="text/javascript">
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

var d = new Image
d.src = './images/portadilla.jpg';
d.onload = function a(){context.drawImage(d, 0, 0);}
</script>

我的图像高456像素，宽320像素，与画布相同。我尝试过使用不同的图像和格式，但问题仍然存在。你会如何解决这个问题？

Answer 1

因为您没有正确设置画布的大小。不要使用CSS /样式来设置大小，而是使用其属性：

<canvas id="canvas" width=320 height=456 style="..."></canvas>

您的图片被拉伸，因为canvas元素的位图的默认大小为300x150像素，因此如果您未正确设置大小，则位图将是拉伸以适应使用CSS设置的元素大小。

您还可以使用JavaScript设置大小：

var canvas = document.getElementById('canvas');
canvas.width = 320;
canvas.height = 456;

JavaScript Canvas drawImage会使我的图像变形

1 个答案: