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

html5 canvas transforms and caching gradient, curves, and rotations

本文关键字：缓存渐变曲线旋转布变换变换 html5 更新时间：2023-10-26

我正在画布上制作一个游戏，到目前为止，我的大多数绘图都是实心形状和圆弧。但我想添加模糊和阴影等效果来创建光晕和轨迹效果。

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

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

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

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

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

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