html5裁剪在画布上绘制的图像

Question

我正在尝试在画布游戏中使用我想从顶部裁剪的图像来绘制计时器以显示倒计时。

我知道我需要使用它：

          ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);

但是我无法理解它，我一直在寻找一些网站，但他们的解释似乎没有在我这里注册。

下面的sorta可以减少高度，因为我有一个变量倒计时以降低高度，我只需要使用它来裁剪高度而不是减少它：

            ctx.drawImage(img,0,0,80,heightVar);

任何人都可以告诉我如何在0,0画出这个图像，它的宽度是80px，高度是480px吗？

Answer 1

如果我理解你的话，你会想做这样的事情：

ctx.drawImage(img, 0, 480 - heightVar, 80, heightVar,
                   0, 480 - heightVar, 80, heightVar);

当测量仪已满（heightVar = 480）时，这将使图像显示为0,0并在heightVar增加时从顶部向下裁剪。我希望这会对你有所帮助。

您还需要确保heightVar保持在（0 - 480）间隔。否则，可能会出现鬼魂。