Question

我在这个问题上的智慧结束了。尝试将图像绘制到HTML5 Canvas中的非常简单的基本情况。 Canvas比图像大得多并且动态调整大小。我打算平铺几个不同的图像，但即使使用简单的drawImage（）调用，我也无法将图像正确地显示在画布中。我将代码简化为您在下面看到的内容，但仍然，我的图像显示的内容比它应该大得多。下面，我一次只尝试drawImage，但没有一个工作。

image = new Image();

image.onload = function() {
   canvas = document.getElementById("bigDynamicCanvas");
   context = canvas.getContext('2d');
   context.drawImage(image, 0, 0);  //Nope
   context.drawImage(image, 0, 0, image.width, image.height); //Nope
   context.drawImage(image, 0, 0, image.width, image.height, 0, 0, image.width, image.height);//Nope
};

image.src = "some.png";

这是在CentOS上的Firefox 24.6.0

编辑：如果画布与图像大小相同，我可以让图像绘制正确的大小，但我不会调整大小。奇怪的是，在调用上述任何一个之前很久就调整了画布的大小。然后，绘制到画布似乎有效果，好像我正在绘制它的原始大小并在之后调整大小，这不是程序中的顺序，至少。

Answer 1

我认为您只是忘了在变量之前添加var，因此对image的引用例如“

}

小提琴：http://jsfiddle.net/eBjL2/4/

<强> HTML

<canvas id="bigDynamicCanvas" width="250" height="300" style="border:1px solid #d3d3d3;"></canvas>

<强> JS

var image = new Image();

image.onload = function() {
   var canvas = document.getElementById("bigDynamicCanvas");
   var context = canvas.getContext('2d');
   context.drawImage(image, 0, 0);  //Nope
   context.drawImage(image, 0, 0, image.width, image.height); //Nope
   context.drawImage(image, 0, 0, image.width, image.height, 0, 0, image.width, image.height);//Nope
};

image.src = "http://www.w3schools.com/tags/img_the_scream.jpg";

Answer 2

代码试图将缩放的图像平铺到调整大小的画布上。问题是所有drawImage()调用都使用与缩放的画布大小相关的坐标。

所以：

<canvas id="mycanvas" width=100 height=100></canvas>

让我说我会调整画布大小

$("#mycanvas").width(200).height(200);

然后我有 10px x 10px 的图块。我正在调整这些图像以及调整大小的画布。考虑到上述情况，scale = 2.0。

// Does NOT work, only 5x5 tiling appears
context.drawImage(image, x*image.width*scale, x*image.height*scale, image.width * scale, image.height * scale);

原因是我对画布的“调整大小”实际上只是一个风格！

<canvas id="fractalCanvas" height="100" width="100" style="width: 200px; height: 200px;"></canvas>

画布使用与最初指定大小相同的坐标。所以在调整画布大小后：

// WORKS, 10x10 tiling @ 200px x 200px, tiles appear as 20x20
context.drawImage(image, x*image.width, x*image.height, image.width, image.height);

drawImage（）在调整大小的Canvas上中断

2 个答案: