我正在尝试将图像放置在画布上而不调整其大小。我认为 drawImage(img, x, y) 可以解决问题，但它会拉伸图像以填充画布。
另外，向 drawImage(img, x, y, width, height) 提供图像的尺寸似乎不起作用。
这是我的代码：
<canvas id="story" style="position:relative; width:800px; height:600px;"></canvas>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById("story");
var context = canvas.getContext("2d");
var img = document.getElementById("img1");
var width = parseInt(img.width);
var height = parseInt(img.height);
context.drawImage(img, 0, 0, width, height);
}
</script>
<img id="img1" alt="" src="http://link to image"/>
提前致谢！
PS：我添加了 parseInt 以确保 drawImage 获得有效值。
不要使用 CSS 来调整画布大小。这将创建一个默认大小的画布并拉伸它。直接在其上设置画布尺寸，您将获得 1 比 1 像素的绘图空间。
<canvas id="story" width="800" height="600" style="position:relative;"></canvas>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
