小编jol*_*eye的帖子

我有一个 15000x15000 像素的矢量图像，我想将其用作画布项目的背景。我需要能够快速且频繁地剪切图像的一部分并将其绘制为背景（在 内requestAnimationFrame）。

为了绘制我正在使用的图像所需的部分......

const xOffset = (pos.x - (canvas.width / 2)) + config.bgOffset + config.arenaRadius;
const yOffset = (pos.y - (canvas.height / 2)) + config.bgOffset + config.arenaRadius;
c.drawImage(image, xOffset, yOffset, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);

计算所需背景的面积并绘制图像。这一切都很好，但重绘很慢，第一次绘制甚至更慢。

加载这个巨大的图像似乎很荒谬，而且性能也很缓慢。如何减小文件大小或提高性能？

编辑：没有合理的解决方案来以全尺寸绘制如此大的图像。因为背景是重复图案，所以我当前的解决方案是采用一个图案“单元格”并多次绘制它。