Canvas drawImage 在大型源上很慢答案

【问题标题】：Canvas drawImage is slow on large sourceCanvas drawImage 在大型源上很慢
【发布时间】：2015-12-03 04:16:46
【问题描述】：

我正在制作一款游戏，并正在创建一个摄像机来跟随玩家。我有一个 4096x4096px 的大画布（游戏地图）。为此，我只想画出其中的一部分：

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

在每一帧之前我都会调用：

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

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

【问题讨论】：

标签： javascript html html5-canvas

【解决方案1】：

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

很可能是尺寸让您放慢了速度。 drawImage() 是 easily the fastest method 用于更新画布，但还有其他事情会减慢您的速度，例如使用 getImageData() 或低效的 Javascript。

【讨论】：

【解决方案2】：

我想你可能误解了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
);

【讨论】：