画布不跟进图像的尺寸调整吗？

Question

我有以下代码：

HTML

<img src="http://hollywoodteenonline.com/wp-content/uploads/2011/12/justin_bieber_someday_fragrance_dree_hemingway.jpg" id="imagem"/>

<canvas id="mycanvas">

CSS

#mycanvas{
  height:200px;
  width: 200px;
  border: solid;
  color: black;
}

#imagem{
  height:200px;
  width: 200px;
}

Java脚本

var canvas = document.getElementById("mycanvas"),
    ctx = canvas.getContext("2d"),
    img = document.getElementById("imagem");

ctx.drawImage(img,0,0);

如您所见，画布不会跟随原始图像的调整大小。 在编写代码时，它“应该”显示所有源，但将其大小调整为指定的画布。 有什么办法可以解决这个问题？

Answer 1

问题

第一个问题是您没有使用画布属性设置画布元素的大小。 这是影响画布内容而不影响设置的唯一方法，这意味着无论您将其设置为CSS规则如何，它都将默认为300 x 150像素。

第二个问题是您正在使用CSS来设置大小。 这将影响元素本身，而不是画布的内容 。 从技术上讲，如果您想将画布缩放为图像，这并没有错，但是它对画布没有任何作用，其结果是您只缩放了300x150像素。

第三个问题，如果图像的大小与300x150不同，则它将不适合画布（太小或太大则被裁剪）。

解决方案

一种解决方案是将画布的大小设置为图像的大小，然后在以下位置绘制图像：

canvas.width  = img.width;
canvas.height = img.height;

ctx.drawImage(img, 0, 0);

现在，您可以根据需要调整画布的大小（使用CSS作为图像）。

或者，您可以使用画布的大小缩放图像（删除CSS规则；并且仍然需要设置画布的大小）：

ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

现场演示

您还需要注意如何调用脚本。 为了使图像与画布一起使用，需要将其加载。 当它们加载异步时，您需要以一种或另一种方式处理加载事件（即，在这种情况下，在window.onload内部）。