javascript - Canvas 不跟进图像的大小调整？

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

Javascript

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

ctx.drawImage(img,0,0);

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

Answer 1

问题

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

第二个问题是您使用 CSS 来设置尺寸。这将影响元素 本身，而不是 Canvas 的内容。从技术上讲，如果您想将 Canvas 缩放为图像，这并没有错，但它不会对 Canvas 做任何事情，结果是您只是缩放 300x150 像素左右。

第三个问题，如果图像的尺寸不同于 300x150，则它不适合 Canvas (太小或太大会被裁剪)。

解决方案

一种解决方案是将 Canvas 的大小设置为图像的大小并绘制图像:

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

ctx.drawImage(img, 0, 0);

现在您可以根据需要调整 Canvas 的大小(作为使用 CSS 的图像)。

或者您可以使用 Canvas 的大小缩放图像(删除 CSS 规则；您仍然需要为 Canvas 设置大小):

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

LIVE DEMO HERE

您还需要注意调用脚本的方式。为了使图像与 Canvas 一起工作，需要加载它们。当它们加载异步时，您需要以一种或另一种方式处理加载事件(即在这种情况下在 window.onload 内)。