的drawImage和调整，以帆布

我有一个形象，这是1836 X 3264我想drawImage()以帆布和调整到739 X 1162的drawImage和调整，以帆布

阅读我认为这可能与下列来完成的文档后：

ctx.drawImage(image, 0, 0, 739, 1162);

我也曾尝试：

ctx.drawImage(image, 0, 0, 1836, 3264, 0, 0, 739, 1162);

两个只显示整个图像的一小部分，而不是萎缩下来。

如何通过值来调整从1836 x 3264 - > 739 x 1162？

来源

2013-03-03 Philip Kirkbride

这应有助于：HTTP：//计算器。 com/questions/2303690/resizing-an-image-in-an-html5-canvas – bfavaretto 2013-03-03 23:52:44

你看起来是正确的，所以你可以仔细检查一下错误的地方。

[编辑：附加的思想]：是你的形象实在1836x3264，而不是3264x1836]

这里是工作代码和一个小提琴：http://jsfiddle.net/m1erickson/MLGr4/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 

    img=new Image(); 
    img.onload=function(){ 
     canvas.width=400; 
     canvas.height=300; 
     ctx.drawImage(img,0,0,img.width,img.height,0,0,400,300); 
    } 
    img.src="http://www.onestopwebmasters.com/wp-content/uploads/2011/06/eitai-bridge.jpg"; 

}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <canvas id="canvas" width=100 height=100></canvas> 
</body> 
</html>

来源

2013-03-04 02:30:02 markE

感谢代码是正确的。这只是手机系统处理画布的一个小故障。 – 2013-03-24 00:50:56

@PhilipKirkbride你能告诉我们这个手机故障是什么以及你如何修复它？ – palsch 2016-08-24 15:13:39

这个答案帮助我意识到我正在设置'canvas.style.width'和'height'而不是'canvas.width'。改变这一点有助于'ctx.drawImage'按预期缩放呈现，而不是在canvas本身具有维度属性之前进行的拉伸。 – crowjonah 2017-11-10 21:21:24

的drawImage和调整，以帆布

回答

相关问题