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

Question

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

我知道我需要使用这个：

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

但是我无法理解它，我一直在查看一些网站，但他们的解释似乎并没有引起我的注意。

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

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

谁能告诉我如何在 0,0 处绘制这个图像，它的宽度是 80 像素，高度是 480 像素？

Answer 1

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

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

当仪表已满（heightVar = 480）时，这将使图像显示在 0、0 处，并随着 heightVar 的增加从上向下裁剪。我希望这可以帮助你。

您还需要确保 heightVar 保持在 (0 - 480) 区间内。否则，可能会出现鬼魂。