Question

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

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

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

Answer 1

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

此外，只要您将这些属性赋予特定值，就应明确定义类型（例如width="700px"）。

但是，请谨慎使用，因为这些可能会使图像失真，具体取决于您如何定义属性。

祝你好运。

Answer 2

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

您可以在此fiddle几种情况中看到。

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

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

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

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

HTML5图像和缩放问题

2 个答案: