html5 canvas转换和缓存渐变，曲线和旋转

我在画布上制作了一个游戏，其中大部分的图形都是实体形状和弧形。但我想添加模糊和阴影等效果来创建发光效果和效果。html5 canvas转换和缓存渐变，曲线和旋转

我的问题是，是否有一个很好的方式，没有外部库，缓存发光元素（玩家，敌人等），是否值得这样做，而不是每次都重新创建效果？旋转也一样。如果我有大约40个不同的角度，我会在玩家旋转他们的船时反复绘制，我是否应该缓存这些计算？

我目前正在使用手动变换来旋转弧末端，而不是旋转上下文，因为我还不知道这是否比多次旋转画布对多个屏幕元素及其不同角度有效率更高或更低效率

2012-07-18 user864572

模糊和阴影效果不包含在主画布库中，但您可以创建自己的库，也可以使用外部画布库（如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/

对于最后一个问题，我建议你一个更好的性能，使用contextsave和restore功能。它快得多。

来源

2012-07-18 06:31:12

does not default canvas has shadowblur？ http://www.williammalone.com/articles/html5-canvas-example/ 我正在考虑使用它，并不断改变半径以获得辉光般的效果。对于变换，你说为每个对象的每个对象平移和旋转整个画布比仅为每个形状上需要绘制形状的点上的点手动计算变换更快？ – user864572 2012-07-18 14:58:07

“shadowBlur”只适用于对象的阴影，而不适用于对象/形状本身。所以如果你想模糊对象而不是模糊的阴影，你需要编写自己的模糊算法或使用其他第三方库。平移和旋转画布肯定会更快，通过倾斜和旋转变换矩阵来计算形状。为了获得更快的性能，您可以将要转换的图形放入单独的较小的画布中。看到测试：http://jsperf.com/canvas-transform-vs-save-restore – 2012-07-18 17:45:42

那么我的游戏主要使用我通过定义曲线和和路径定义的形状，并且我计划通过使用遍布整个物体的阴影。 – user864572 2012-07-18 20:09:02

html5 canvas转换和缓存渐变，曲线和旋转

回答

相关问题