Question

我正在制作一款游戏并正在创建一款可以跟随播放器的相机。我有一张4096x4096px的大画布（游戏地图）。为此，我想仅绘制一部分内容：

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

在每个帧之前，我会打电话：

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

仅清除相机。我能看到的是drawImage非常慢，性能明智。我的游戏地图是否大而且不是由drawImage处理的？如何创建平滑渲染？

Answer 1

我认为你可能会误解drawImage的一些论点。

正如您撰写的drawImage，它将从源片段剪辑800x600。然后它将它扩大到4096x4096。它最终会在画布上画出4096x4096。

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

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

Answer 2

我们需要查看更多代码才能真正了解性能问题的位置。

最有可能的是它的大小会减慢你的速度。 drawImage() easily the fastest method用于更新画布，但还有其他一些因素可能会减慢您的速度，例如使用getImageData()或效率低下的Javascript。

Canvas drawImage在大型源代码上很慢

2 个答案: