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

solar system by HTML5的更多相关文章

  1. 认识我们的太阳系(Solar System)

    一.初识太阳系 如果太阳是一颗篮球,那么我们的地球是什么?? 如果太阳系里最大的行星:木星是一颗足球,那么我们的地球是什么?? 如果我们的地球是一颗排球,那么其他行星是什么?? 由此,我们可以看到,我 ...

  2. HTML5资料

    1 Canvas教程 <canvas>是一个新的用于通过脚本(通常是JavaScript)绘图的HTML元素.例如,他可以用于绘图.制作图片的组合或者简单的动画(当然并不那么简单).It ...

  3. Coordinate System

    Coordinate System Introduction of Different Coordinate Systems Cartesian Coordinate System UI Coordi ...

  4. 基于 HTML5 + WebGL 的宇宙(太阳系) 3D 可视化系统

    前言 近年来随着引力波的发现.黑洞照片的拍摄.火星上存在水的证据发现等科学上的突破,以及文学影视作品中诸如<三体>.<流浪地球>.<星际穿越>等的传播普及,宇宙空间 ...

  5. 基于 HTML5 + WebGL 的太阳系 3D 展示系统

    前言 近年来随着引力波的发现.黑洞照片的拍摄.火星上存在水的证据发现等科学上的突破,以及文学影视作品中诸如<三体>.<流浪地球>.<星际穿越>等的传播普及,宇宙空间 ...

  6. 基于 HTML5 + WebGL 的宇宙 3D 展示系统

    前言 近年来随着引力波的发现.黑洞照片的拍摄.火星上存在水的证据发现等科学上的突破,以及文学影视作品中诸如<三体>.<流浪地球>.<星际穿越>等的传播普及,宇宙空间 ...

  7. 基于 HTML5 + WebGL 的 3D 太阳系系统

    前言 近年来随着引力波的发现.黑洞照片的拍摄.火星上存在水的证据发现等科学上的突破,以及文学影视作品中诸如<三体>.<流浪地球>.<星际穿越>等的传播普及,宇宙空间 ...

  8. 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  9. Web3D编程入门总结——面向对象的基础Web3D框架

    本篇主要通过分析Tony Parisi的sim.js库(原版代码托管于:https://github.com/tparisi/WebGLBook/tree/master/sim),总结基础Web3D框 ...

随机推荐

  1. 浅谈HTTPS和SSL/TLS协议的背景和基础

    相关背景知识要说清楚HTTPS协议的实现原理,至少要需要如下几个背景知识.大致了解几个基础术语(HTTPS.SSL.TLS)的含义大致了解HTTP和TCP的关系(尤其是"短连接"和 ...

  2. git commit 代码时提示： Warning: Your console font probably doesn‘t support Unicode.

    git 提交代码是会遇到以下问题, git commit 代码时提示: Warning: Your console font probably doesn‘t support Unicode. If ...

  3. 用花生壳实现内网映射，决解无域名、无公网IP、无服务器空间问题

    无域名.无公网IP.无服务器空间用花生壳提供的免费内网映射吧.你的PC就是服务器,花生壳提供的自定义二级域名轻松访问你的个人网站. 1.首先你得注册哦,然后申请免费的域名(2个) 2.设置路由器,下面 ...

  4. UNION和UNION ALL

    UNION 用于合并两个或多个 SELECT 语句的结果集,并消去表中任何重复行.UNION 内部的 SELECT 语句必须拥有相同数量的列,列也必须拥有相似的数据类型.同时,每条 SELECT 语句 ...

  5. 机器学习实战4：Adaboost提升：病马实例+非均衡分类问题

    Adaboost提升算法是机器学习中很好用的两个算法之一,另一个是SVM支持向量机:机器学习面试中也会经常提问到Adaboost的一些原理:另外本文还介绍了一下非平衡分类问题的解决方案,这个问题在面试 ...

  6. Android Fragment替换View

    在BaseActivity 中添加替换方法 public void replace(int id, Fragment fragment) { getSupportFragmentManager() . ...

  7. If you only do what you can do you'll never be more than you are now.

    If you only do what you can do you'll never be more than you are now. 如果你只是做你力所能及的事,你将不会有所进步:

  8. Android 逐帧动画

    原理: 逐帧动画是最简单的一种动画.原理就是把几张图片连续显示出来,以达到动画的效果.就相当于下面这种手绘翻页动画啦~ 实现: 1.需要建立一个animation-list来设置静态图片资源.持续时间 ...

  9. 关于sql的关联排序

    个人觉得对sql的玩转其实是sql中各种函数方法的理解的透彻. 原始数据表 要求查询的结果排序 其实刚看题目可能觉得要用group by但是再网下继续思考可能就没有思路了 但是如果你接触过over的试 ...

  10. webapi mvc session一直获取不到问题

    前一段时间在给移动端写接口时遇到一个调用接口发送邮箱 session 一直获取不到的问题.我来给遇到问题的同志们说一说 自个在网上查了好多资料,问了一些朋友后.终于找到解决方案了. 大家都知道weba ...