0

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

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

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

4

2 回答 2

0

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

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

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

祝你好运。

于 2012-08-31T00:06:57.350 回答
0

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

你可以在这个小提琴中看到几个场景。

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

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

  • Fit : 使图像适合 400x400 画布并将其居中
  • 拉伸：调整图像大小，使其完全填满 400x400 画布
  • 真实：图像以其原始尺寸渲染，但画布尺寸为 400x400
  • Auto：画布大小与图像大小匹配

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

于 2012-08-31T00:18:40.700 回答