HTML5 图像和缩放问题答案

【问题标题】：HTML5 images and scaling issuesHTML5 图像和缩放问题
【发布时间】：2012-08-25 18:55:19
【问题描述】：

当我在画布中绘制图像时，我必须指定画布的宽度和高度，使其与我尝试绘制的图像大小相匹配。

<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>

指定画布的宽度和高度不是很好，因为我可能需要使用与取决于屏幕分辨率的值不同的值，我需要处理比例，所以我想知道如何处理这个问题如何在无需指定画布宽度和高度的情况下绘制图像。

【问题讨论】：

标签： html canvas image-scaling

【解决方案1】：

您不一定需要指定画布的宽度和高度。您可以随时通过其宽度和高度属性更改它。您还可以拥有一个固定大小的画布，然后缩放您的图像以使其适合或被拉伸。

你可以在这个fiddle看到几个场景。

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

然后，您可以使用按钮来触发其他缩放模式

适合：使图像适合 400x400 画布并居中
拉伸：调整图像大小，使其完全填满 400x400 画布
真实：图像以其原始大小呈现，但画布尺寸为 400x400
自动：画布大小与图像大小匹配

我希望这可以帮助您获得一些想法。

【讨论】：

【解决方案2】：

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

此外，任何时候您为这些属性赋予特定值时，都应明确定义类型（例如width="700px"）。

但请小心，因为这些可能会扭曲您的图像，具体取决于您定义属性的方式。

祝你好运。

【讨论】：