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为默认值也不会有什么问题。