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