文字阴影

Question

我正在开发一个使用几个画布（3）相互叠加的游戏。我即将完成比赛，但我还没有优化表现。

无论如何，我主要担心的是到目前为止游戏表现相当不错，但接近完成我正在画布周围建立一个简单的网页，为游戏提供框架。我正在谈论只是把游戏的标题和一些链接放在这里和那里，但突然间游戏现在波涛汹涌而且缓慢！如果删除这些元素，一切都会再次平滑。

罪魁祸首是：

画布上方的游戏标题（使用文字阴影设置）。
画布下方的四个按钮可重定向到其他网站和信用。

这些静态元素是否有可能干扰游戏的渲染？

谢谢。

Answer 1

任何带有阴影，圆角或昂贵效果（如模糊）的东西都需要花费大量的时间来渲染。

现代浏览器尝试以各种方式对其进行优化，但有些特殊情况无法解决这些问题（使用3D硬件的更新渲染引擎将来会有所帮助）。

阴影与模糊密切相关，需要每帧合成，因为背景，阴影颜色，模糊范围等可能会发生变化。圆角强制浏览器创建alpha蒙版而不是仅执行矩形剪辑。浏览器可能会缓存其中一些操作，但最终会加起来。

文字阴影

解决方法是将阴影文本“缓存”为图像。它可以是Photoshop中的预制图像，也可以使用canvas元素动态制作。然后显示它而不是文本+阴影。

实施例

var ctx = c.getContext("2d"),
    txt = "SHADOW HEADER";

// we need to do this twice as when we set width of canvas, state is cleared
ctx.font = "bold 28px sans-serif";

c.width = ctx.measureText(txt).width + 20; // add space for shadow
c.height = 50;                             // estimated

// and again...
ctx.font = "bold 28px sans-serif";
ctx.textBaseline = "top";
ctx.textAlign = "left";
ctx.shadowBlur = 9;
ctx.shadowOffsetX = 9;
ctx.shadowOffsetY = 9;
ctx.shadowColor = "rgba(0,0,0,0.8)";
ctx.fillStyle = "#aaa";

ctx.fillText(txt, 0, 0);

body {background:#7C3939}

<canvas id=c></canvas>

现在可以根据需要放置canvas元素。此外，您可以将画布转换为图像并使用它而无需额外的开销。

圆角

元素上的圆角也很昂贵，并且没有简单的方法 - 角落需要以某种方式切割，问题是哪种方法最快。

让浏览器使用CSS
覆盖元素，外角覆盖与背景相同的颜色 - 笨重，但可以快速，因为不需要剪裁。但是，需要合成更多数据。
直接通过globalCompositeOperation在画布中使用遮罩。这可能是最慢的方法。必须对此方案进行性能测试，以找出哪种方案最佳。
妥协并删除圆角。

链接

这些也可以被可点击的图像取代。这有点单调乏味但也可以使用画布动态制作，允许文本进行临时更改。

CSS

我还建议尝试使用position: fixed;来表示某些元素。使用fixed时，某些浏览器会单独呈现该元素（为其提供自己的位图）。在某些情况下，这可能更有效。

但是要做一些性能测试，看看哪种组合最适合您的场景。

外部元素减慢了画布

1 个答案:

文字阴影

实施例

圆角

链接

CSS