javascript - Canvas drawImage 在大型源上速度很慢

Question

我正在制作一款游戏，并正在创建一个摄像机来跟踪玩家。我有一个 4096x4096px 的大 Canvas (游戏 map )。为此，我只想绘制其中的一部分:

ctx.drawImage( canvas, 0, 0, 800, 600, 0, 0, 4096, 4096 );

在每一帧之前我会调用:

ctx.clearRect( 0, 0, 800, 600 );

仅清除相机。我可以看到，drawImage 在性能方面非常慢。我的游戏 map 是否太大并且不是由drawImage 处理的？如何创建平滑的渲染？

Answer 1

我认为您可能误解了 drawImage 的一些参数。

正如您编写的drawImage，它将从源中剪辑一个 800x600 的图像。然后它会将其放大到 4096x4096。它最终会在 Canvas 上绘制 4096x4096 的尺寸。

所以你有一个 4096x4096 的 spritesheet。您想要从 spritesheet 中剪辑 800x600 的部分并将该剪辑绘制到 Canvas 上:

// this will clip 800x600px from your source image
// starting at top-left == [1600,0]
// and it will paint that clipping at [0,0] on the canvas
// while not changing the clipping size from its original 800x600

ctx.drawImage(
    yourImage        // use yourImage as the source image
    1600,0           // clip from the source image with top-left at [1600,0]
    800,600          // clip 800x600px from the source
    0,0              // paint the clipping at [0,0] on the canvas
    800,600          // use the same 800x600 size that was clipped
);