javascript：canvas.drawImage如何工作

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 x 200px，图像更大（但样式也设置为200px x 200px）

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

• “ 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 ...>

改良的小提琴

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