HTML5图像和缩放问题

当我在画布中绘制图像时，我必须指定画布宽度和高度，以便它与我试图绘制的图像大小相匹配。HTML5图像和缩放问题

<script> 
    window.onload = function() { 
    var canvas = document.getElementById("myCanvas"); 
    var context = canvas.getContext("2d"); 
    var imageObj = new Image(); 

    imageObj.onload = function() { 
     context.drawImage(imageObj, 0, 0); 
    }; 
    imageObj.src = "<%=image_path('logo.jpg')%>"; 

    }; 

</script> 
<canvas id="myCanvas" width="700" height="400"></canvas>

指定画布宽度和高度也不是那么好，因为我可能需要比这取决于屏幕的分辨率那些，我需要在比例工作，使用不同的值，所以我想知道如何处理这个问题，以及如何绘制图像，而不必指定画布的宽度和高度。

来源

2012-08-30 user1554966

我会建议使用百分比来指定高度和宽度。这些会将值定义为包含块的百分比。

此外，任何时候你给这些属性的某些值，类型应明确定义（例如width="700px"）。

尽管如此，请谨慎使用，因为这些可能会扭曲图像，具体取决于您如何定义属性。

祝你好运。

来源

2012-08-31 00:06:57

您不一定需要指定画布的宽度和高度。您可以随时通过其宽度和高度属性来更改它。你也可以有一个固定尺寸的画布，然后缩放图像，使它们适合它或拉伸。

你可以在这个fiddle看到几种情况。

最初画布没有宽度和高度
当图像被加载时，它激活“自动”模式，这意味着，它改变画布大小的图像的大小

然后，您可以用按钮发挥触发其它缩放模式

适合：适合在400x400的画布图像和中心它
拉伸：调整图像的大小，使其充满400x400的画布完全
真实：图像呈现在原来的大小，但在画布尺寸为400×400
自动：画布大小匹配图片尺寸

我希望这可以帮助你得到一些想法。

来源

2012-08-31 00:18:40 jbalsas

HTML5图像和缩放问题

回答

相关问题