代码之家 › 专栏 › 技术社区 › Edward Q. Bridges

未指定尺寸时图像未填充画布[重复]

html5-canvas css html javascript

Edward Q. Bridges · 技术社区 · 4 年前

我想动态地创建一个画布,在运行时指定画布的尺寸;然后我想在画布上渲染一个图像,以便它填充画布的整个尺寸。

当我在 <canvas> 元素,如此代码段中所示(默认情况下隐藏):

<!DOCTYPE html>
<html>

<body>

  <h3>
    Source Image
  </h3>
  <img id="image" src="http://placehold.it/180x180">

  <h3>Canvas:</h3>
  <canvas id="canvas" width="200" height="200" style="border:1px solid #d3d3d3;">
</canvas>

  <script>
    window.onload = function() {
      var c = document.getElementById("canvas");
      var ctx = c.getContext("2d");
      var img = document.getElementById("image");
      ctx.drawImage(img, 10, 10);
    }
  </script>

</body>

</html>

但是,如果我动态地创建 < 元素使用Javascript,并使用CSS设置创建后的大小,图像将不会填充整个画布:

<!DOCTYPE html>
<html>

<body>

  <h3>
    Source Image
  </h3>
  <img id="image" src="http://placehold.it/180x180">

  <h3>Canvas:</h3>
  <canvas id="canvas" style="border:1px solid #d3d3d3;">
</canvas>

  <script>
    window.onload = function() {
      var c = document.getElementById("canvas");
      c.style.width = "200px";
      c.style.height = "200px";
      var ctx = c.getContext("2d");
      var img = document.getElementById("image");
      ctx.drawImage(img, 10, 10);
    }
  </script>

</body>

</html>

我觉得我在这里遗漏了一些非常明显的东西——任何关于如何使动态渲染的画布看起来像第一个片段的帮助都将不胜感激。

1 回复 | 直到 4 年前

blex 4 年前

通过使用 c.style.width ,您定义了在屏幕上显示它的比例(它只是CSS)。

要实际设置画布的内部大小,请执行以下操作:

window.onload = function() {
  var c = document.getElementById("canvas");
  c.width = 200;
  c.height = 200;
  var ctx = c.getContext("2d");
  var img = document.getElementById("image");
  ctx.drawImage(img, 10, 10);
}

<h3>Source Image</h3>
<img id="image" src="http://placehold.it/180x180">

<h3>Canvas:</h3>
<canvas id="canvas" style="border:1px solid #d3d3d3;"></canvas>

注:

More info on window.devicePixelRatio 如果你感兴趣的话。

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前