0

我有以下代码：

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

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

4

1 回答 1

2

问题

第一个问题是您没有通过使用其属性来设置画布元素的大小。这是您可以影响画布内容而不是设置的唯一方法，这意味着无论您为其设置什么 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在这种情况下是在 a 内）。

于 2013-10-22T20:40:13.933 回答