Question

我正在尝试将图像绘制到画布上，如下所示：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,0,0,100,100,0,0,200,200);

画布是200px×200px，图像更大（但也是200px，200px的风格）

正如您在jsfiddle中看到的那样，画布不显示图像（我期待图像的一部分）。我对drawImage的理解（如here所述）如下：

“0,0,100,100”在图像上定义了一个矩形，它是绘制到画布上的部分。 0,0定义顶部/左角，100,100是边的宽度。
此矩形绘制在由0,0,200,200

这里有什么问题吗？

Answer 1

你的图像实际上是585 x 585，所以你要做的就是从它上面剪一个角（这是空白的）并将它画到画布上，当然不会显示任何东西。

使用CSS缩放图像实际上并未改变其大小。它只能缩放它以供显示。

所以你需要做的是使用图像的原始大小作为基础。如果您只是想缩小它以适应画布，您可以这样做：

ctx.drawImage(img, 0, 0, 200, 200);

帆布也是如此。不要使用CSS缩放画布，而是设置width和height属性/属性，否则画布将默认为300x150（然后由css缩放）：

<canvas width=200 height=200 ...>

<强> Modified fiddle

Answer 2

在画布上设置宽度和高度，并以相同的尺寸绘制图像。更新了您的小提琴 - http://jsfiddle.net/FQhGg/2/

var c=document.getElementById("myCanvas"),
    ctx=c.getContext("2d"),
    img=document.getElementById("scream"),
    width = img.width,
    height = img.height;

c.width = width;
c.height = height;
ctx.drawImage(img,0,0,width,height);

javascript：canvas.drawImage是如何工作的

2 个答案: