Javascript 在html画布中绘制的图像不是全尺寸_Javascript_Html_Canvas

Javascript 在html画布中绘制的图像不是全尺寸

javascript html canvas

Javascript 在html画布中绘制的图像不是全尺寸,javascript,html,canvas,Javascript,Html,Canvas,当尝试使用context.drawImage（）函数在画布上绘制图像时，它只显示图像的缩放区域，而不是画布上显示的完整图像（两者大小相同）。但当我将图像附加到DOM时，它会正确显示。您可以看到JSFIDLE中的差异。顶部图像是画布，底部图像是直接附加到文档体的图像这里还有代码片段，这里可能有什么问题 <html> <body> <canvas id="canvas" style="border: 1px solid black"> </canvas&

当尝试使用context.drawImage（）函数在画布上绘制图像时，它只显示图像的缩放区域，而不是画布上显示的完整图像（两者大小相同）。但当我将图像附加到DOM时，它会正确显示。您可以看到JSFIDLE中的差异。顶部图像是画布，底部图像是直接附加到文档体的图像

这里还有代码片段，这里可能有什么问题

<html>
<body>
<canvas id="canvas" style="border: 1px solid black">
</canvas>
<script type="text/javascript">
var canvas  = document.getElementById("canvas");
var image = new Image();
image.src = "room_default.jpg";
image.height = "400";
image.width = "800";
image.onload = function(){
    canvas.width = image.width;
    canvas.height = image.height;
    document.body.appendChild(image);
    var ctx= canvas.getContext("2d");
    ctx.drawImage(image,0,0);
}
</script>
</body>


var canvas=document.getElementById（“canvas”）；
var image=新图像（）；
image.src=“room\u default.jpg”；
image.height=“400”；
image.width=“800”；
image.onload=函数（）{
canvas.width=image.width；
canvas.height=image.height；
document.body.appendChild（图像）；
var ctx=canvas.getContext（“2d”）；
ctx.drawImage（图像，0,0）；
}

这是您的解决方案

var canvas  = document.getElementById("canvas");
var image = new Image();
image.src = "http://cdn.home-designing.com/wp-content/uploads/2011/06/livingroom_i_by_dragon2525-d3ioeyf.jpg";
image.height = "400";
image.width = "800";
image.onload = function(){
    canvas.width = image.width;
    canvas.height = image.height;
    document.body.appendChild(image);
    var ctx= canvas.getContext("2d");
    ctx.drawImage(image,0,0,image.width,image.height);
}

更新

ctx.drawImage（image，0,0，image.width，image.height）
您可以将画布图像事件的高度和宽度作为drawImage函数的第4个和第5个参数传递，而不是image.height=“400”；image.width=“800”写入image.style.height=“400px”；image.style.width=“800px”@RolandStarke我试过了，但它将画布大小设置为图像的原始尺寸1174x681。这很有效！但我仍然不明白，当调整大小的图像和画布的尺寸相同时，为什么我需要传递这些。
    hi please check this your issue resolvevar canvas  = document.getElementById("canvas");
var image = new Image();
image.src = "http://cdn.home-designing.com/wp-content/uploads/2011/06/livingroom_i_by_dragon2525-d3ioeyf.jpg";
image.height = "400";
image.width = "800";
image.onload = function(){
    canvas.width = image.width;
    canvas.height = image.height;
    document.body.appendChild(image);
    var ctx= canvas.getContext("2d");
    ctx.drawImage(image,0,0,image.width,image.height);
}