我试图在没有调整大小的情况下将图像放在画布上.我想的drawImage(IMG,X,Y)会做的伎俩,但它拉伸图像填充画布.也与我的图像的尺寸的drawImage供给(IMG,X,Y,宽度,高度)似乎不工作.
这是我的代码:
<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"/>
Run Code Online (Sandbox Code Playgroud)
提前致谢!
PS:我添加了parseInt以确保drawImage获得有效值.