solar system by HTML5

solar system by HTML5

星際穿越感受很炫酷啊,網易貌似作了個專題在朋友圈挺火的.用canvas模擬太陽系,嗯，不錯昂!

代碼及效果

See the Pen GgpRjN by NancyChan (@NancyChan) on CodePen.

其實很常見的示例代碼，不過爲了熟悉基礎仍是本身動手寫寫,須要注意的是 globalCompositeOperation的用法,驗證了下就理解了.

CanvasRenderingContext2D.globalCompositeOperation

The CanvasRenderingContext2D.globalCompositeOperation property of the Canvas 2D API sets the type of compositing operation to apply when drawing new shapes, where type is a string identifying which of the compositing or blending mode operations to use.

示例代碼上面繪製順序是,earth moon orbit sun,因此ctx.globalCompositeOperation= "destination-over"(New shapes are drawn behind the existing canvas content),由於ctx.globalCompositeOperation的默認值是source-over。
draws new shapes on top of the existing canvas content.若是按照sourse-over的規則,sun這張圖在頂層就遮住了其餘元素了.因此globalCompositeOperation的值徹底是根據本身繪製元素時候來定規則的.

若是我繪製順序是sun orbit earth moon，ctx.globalCompositeOperation爲默認值也不會有什麼問題。