solar system by HTML5 星际穿越感觉很炫酷啊,网易貌似做了个专题在朋友圈挺火的.用canvas模拟太阳系,嗯,不错昂! 代码及效果 See the Pen GgpRjN by NancyChan (@NancyChan) on CodePen. 其实很常见的示例代码,不过为了熟悉基础还是自己动手写写,需要注意的是 globalCompositeOperation的用法,验证了下就理解了. CanvasRenderingContext2D.globalCompositeOper…

一.初识太阳系 如果太阳是一颗篮球,那么我们的地球是什么?? 如果太阳系里最大的行星:木星是一颗足球,那么我们的地球是什么?? 如果我们的地球是一颗排球,那么其他行星是什么?? 由此,我们可以看到,我们的地球跟太阳相比,是多么渺小,跟木星相比,依然是很渺小,但是地球是所有太阳内行星里的老大(岩石行星). 我们合起来比较一下: 二.什么是太阳系 太阳系是以太阳为中心,和所有受到太阳的重力约束天体的集合体:8颗行星(2006年冥王星被去掉,因为其运动轨迹与其它八大行星不同,所以只剩下金星.水星.地球…

1 Canvas教程 <canvas>是一个新的用于通过脚本(通常是JavaScript)绘图的HTML元素.例如,他可以用于绘图.制作图片的组合或者简单的动画(当然并不那么简单).It can for instance be used to draw graphs, make photo compositions or do simple (and not so simple) animations. 1.1 基本用法 Basic usage <canvas>元素 Let's s…

Coordinate System Introduction of Different Coordinate Systems Cartesian Coordinate System UI Coordinate System Direct3D Coordinate System OpenGL and Cocos2d Coordinate System Parent and Childrens Anchor Point getVisibleSize, getVisibleOrigin vs getW…

前言 近年来随着引力波的发现.黑洞照片的拍摄.火星上存在水的证据发现等科学上的突破,以及文学影视作品中诸如<三体>.<流浪地球>.<星际穿越>等的传播普及,宇宙空间中那些原本遥不可及的事物离我们越来越近,人们对未知文明的关注和对宇宙空间的好奇达到了前所未有的高度.站在更高的立足点上,作为人类这个物种中的一员,我们理所应当对我们生活的星球.所在的太阳系有一定的认识,对 8 大行星各自的运行轨道.质量.资源存储量甚至是地形有一定的了解. 本系统采用 Hightopo 的 H…

前言 近年来随着引力波的发现.黑洞照片的拍摄.火星上存在水的证据发现等科学上的突破,以及文学影视作品中诸如<三体>.<流浪地球>.<星际穿越>等的传播普及,宇宙空间中那些原本遥不可及的事物离我们越来越近,人们对未知文明的关注和对宇宙空间的好奇达到了前所未有的高度.站在更高的立足点上,作为人类这个物种中的一员,我们理所应当对我们生活的星球.所在的太阳系有一定的认识,对 8 大行星各自的运行轨道.质量.资源存储量甚至是地形有一定的了解. 本系统采用 Hightopo 的 H…

前言 近年来随着引力波的发现.黑洞照片的拍摄.火星上存在水的证据发现等科学上的突破,以及文学影视作品中诸如<三体>.<流浪地球>.<星际穿越>等的传播普及,宇宙空间中那些原本遥不可及的事物离我们越来越近,人们对未知文明的关注和对宇宙空间的好奇达到了前所未有的高度.站在更高的立足点上,作为人类这个物种中的一员,我们理所应当对我们生活的星球.所在的太阳系有一定的认识,对 8 大行星各自的运行轨道.质量.资源存储量甚至是地形有一定的了解. 本系统采用 Hightopo 的 H…

前言 近年来随着引力波的发现.黑洞照片的拍摄.火星上存在水的证据发现等科学上的突破,以及文学影视作品中诸如<三体>.<流浪地球>.<星际穿越>等的传播普及,宇宙空间中那些原本遥不可及的事物离我们越来越近,人们对未知文明的关注和对宇宙空间的好奇达到了前所未有的高度.站在更高的立足点上,作为人类这个物种中的一员,我们理所应当对我们生活的星球.所在的太阳系有一定的认识,对 8 大行星各自的运行轨道.质量.资源存储量甚至是地形有一定的了解. 本系统采用 Hightopo 的 H…

CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文章为大家挑选了15个超炫的 CSS 动画效果的例子,这些 Demo 可以说都是艺术品.(为保证最佳的效果,请在 Chrome.Firefox 和 Safari 等现代浏览器中浏览) 9. 3D Synth Pure CSS 3D Synthesizer (mousedown for rotation…

本篇主要通过分析Tony Parisi的sim.js库(原版代码托管于:https://github.com/tparisi/WebGLBook/tree/master/sim),总结基础Web3D框架的编写方法.在上一篇的基础上,要求读者具有简短英文阅读或者查字典的能力. 限于水平和时间,本文难免出现错误与遗漏,您在阅读过程中如果遇到错误或者疑问请在评论区中指出,我将尽快回复. 为提高JavaScript编程效率,建议使用WebStorm工具进行网页程序编写,WebStorm官网:http:/…