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轉換和緩存漸變，曲線和旋轉

回答

相關問題