html5 画布变换和缓存渐变、曲线和旋转答案

【问题标题】：html5 canvas transforms and caching gradient, curves, and rotationshtml5 画布变换和缓存渐变、曲线和旋转
【发布时间】：2012-07-18 14:31:12
【问题描述】：

我正在使用画布制作游戏，到目前为止，我的大部分绘图都是实心形状和弧线。但我想添加模糊和阴影等效果来创建发光和拖尾效果。

我的问题是，是否有一种无需外部库的好方法来缓存发光元素（玩家、敌人等），是否值得这样做而不是每次都重新创建效果？旋转也是如此。如果我在玩家旋转飞船时重复绘制大约 40 个不同的角度，我应该只缓存这些计算吗？

我目前正在使用手动变换来旋转弧形结尾，而不是旋转上下文，因为我还不知道这是否比针对许多屏幕元素及其不同角度重复旋转画布更有效或更有效

【问题讨论】：

【解决方案1】：

模糊和阴影效果不包含在主画布库中，但您可以创建自己的库，或者您可以使用外部画布库，如 easel.js，但有大量与 HTML5 <canvas> 相关的不同库。您可以选择最适合您的。

关于模糊效果，您可以使用 Mario Klingeman stackblur javascript 实现：http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html。它易于使用且速度超快。

对于发光效果，随机纹理生成的一种好方法是已经在 javascript 中实现的单纯形噪声算法：https://gist.github.com/304522 或此处的原始算法：http://mrl.nyu.edu/~perlin/noise/

对于最后一个问题，我建议您使用 context save 和 restore 功能以获得更好的性能。它要快得多。

【讨论】：

默认画布没有阴影模糊吗？ williammalone.com/articles/html5-canvas-example 我正在考虑使用它并不断改变半径以获得类似发光的效果。对于变换，您是说每帧为每个对象平移和旋转整个画布比手动计算每个形状上我需要能够绘制形状的点的变换更快？
shadowBlur 仅适用于对象的阴影，不适用于对象/形状本身。所以如果你想模糊对象而不是投射的阴影，你需要编写自己的模糊算法或使用其他第三方库。平移和旋转画布肯定比通过倾斜和旋转变换矩阵来计算形状更快。为了获得更快的性能，您可以将要转换的形状放入单独的较小画布中。查看测试：jsperf.com/canvas-transform-vs-save-restore
嗯，我的游戏主要使用我通过定义曲线和路径定义的形状，并且我计划通过在整个对象周围使用阴影模糊来创建发光。