canvans绘制太阳,地球,月亮

2024-09-04

canvas动画---- 太阳、地球、月球

<div> <canvas id="canvas" width="500" height="500"></canvas> </div> function draw(){ var canvas = document.getElementById("canvas"); if (!canvas.getContext) return; var ctx = canvas.getContex

太阳地球月亮运行动画（使用@keyframes）

闲来无事的demo <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ background: #000; } .sun{ width: 280px; height: 280px; margin-top: 200px; margin-lef

一.引言自学two.js第三方绘图工具库,认识到这是一个非常强大的类似转换器的工具,提供一套固定的接口,可用在各种技术下,包括:Canvas.Svg.WebGL,极大的简化了应用的开发.这里,我使用two.js手册里教的一些方法,做一个小练习,模拟绘制太阳-月亮-地球自转公转的类银河系转动的动画效果. 二.原理在Two.js中和Canvas.SVG都不同的有这么几个地方: Two.js中所有的旋转都是以自己为中心 Two.js中的旋转不会累加 Two.js中不使用定时器,使用Two.play

discuz修改太阳，月亮，星星等级图标

想必大家都想修改一下默认的等级图标吧,刚才在论坛上看见很多大神的方法都是要修改文件的,不过为了安全起见需要事先备份好才改,这种方法是可行的,但可能有些新手站长不会修改,又或者改错了恢复不来,现在我教大家一个用代码就可以修改的方法: 先把你的等级图片在论坛用附件的形式发表在帖子中,然后按右键查看属性,这就是要替换的地址,然后在任意帖子中按右键查看你论坛的等级图片地址,这就是你论坛的等级地址,最后按照代码来替换就行了. 代码裡一共三段代码,每一段都有2个图片链接地址. 要换的就是每一段中的两个图片影

canvas绘制星星和月亮

用变量的方式绘制一个五角星,首先求五角星十个顶点的坐标. 可以把每个五角星看成外顶点用一个大圆绘制,内顶点用小圆绘制.在坐标系(0deg)下,根据每个顶点的角度和圆的半径求得x,y. 而每个大顶点相差72deg(180/5),每个小顶点也差72deg.所以下一个顶点的度数就是当前点加上72deg.(逆时针) 代码实现画一个五角星 drawStar(context, 300, 150, 400, 400,30); function drawStar(context, R, r, x, y,rot)

算法：QQ等级换算成皇冠太阳星星月亮

/// <summary> /// 等级换算成图标分布 /// 以QQ的形式计算 /// 2^(2*0) /1 /// 2^(2*1) /4 /// 2^(2*2) /16 /// 2^(2*3) /64 /// </summary> /// <param name="target">目标等级</param> /// <param name="x">计算底数</param>

WebGL之绘制三维地球

通过Three.js也许可以很方便的展示出3D模型,但是你知道它是怎么一步一步从构建网格到贴图到最终渲染出3D模型的吗?现在我们直接使用底层的webgl加上一点点的数学知识就可以实现它. 本节实现的效果: WebGL三维地球内容大纲构建网格编写着色器实现3D地球构建网格首先我们要建立球体的三维模型,三维网格模型包括如下属性(不熟悉请复习webgl教程): 顶点(position) 法线(normal) 贴图坐标(uv) 顶点索引(indices) 最后要构建出如下所示的经纬球模型首

HTML5_画布_太阳系

HTML5_画布_太阳系一.canvas属性和方法的简单介绍①对于不支持canvas标签的浏览器需要显示"不支持canvas"使用IE11浏览器的开发人员工具,仿真:文档模式=8,显示:IE8不支持canvas 默认的画布背景是白色的,可以给它加一个背景样式 \App3_HTML5\Module2_Canvas\canvas-1.html <!DOCTYPE html> <html> <head lang="en"> <m

OpenGL “太阳、地球和月亮”天体运动动画例子

http://oulehui.blog.163.com/blog/static/7961469820119186616743/ OpenGL “太阳.地球和月亮”天体运动动画例子 2011-10-18 18:06:16| 分类: OpenGL | 标签:opengl 实例例子 |举报|字号订阅 #include <GL/glut.h>#include <stdio.h>#include <time.h> // 太阳.地球和月亮// 假设每个月都是

OpenGL学习笔记之三（简单示例太阳月亮地球）

#include<glut.h> // 太阳.地球和月亮 // 假设每个月都是30天 // 一年12个月,共是360天 ;//day的变化:从0到359 void myDisplay(void) { glDepthFunc(GL_LEQUAL);//设置深度<=通过,与物体之间的前后有关 glEnable(GL_DEPTH_TEST);//深度检测 glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); glMatrixMode(GL_PR

OpenGL入门程序五：三维绘制

1.现实世界观察一个物体的时候,可能涉及到的三维变化: 1>视图变化------从不同的角度观察. 2>模型变化------移动.旋转物体,计算机中当然还可以对物体进行缩放. 3>投影变换------如果要画出观察的物体,是否需要近大远小的变化. 4>剪裁------只希望看到物体的一部分,而不是全部. 5>视口变换------画出整个物体,但是只占据纸张的某一部分而不是全部. 2.OpenGl的变化(移动.旋转.缩放等)都是通过矩阵乘法实现的,均可在当前矩阵的基础上乘以一个

three.js 制作太阳系统

最近学了three.js,想拿来练练手,喜欢宇宙,于是亲手撸代码来完成这个,为了更真实,于是查了一些相关资料.1. 距离太阳由近及远分别是[水星,金星,地球,火星,木星,土星,天王星,海王星]2. 他们分别到太阳的距离为5791, 10820, 14960, 22794, 77833, 142940, 287099, 450400(单位万千米)3. 他们的半径分别为2440, 6052, 6371, 3397, 71492, 60268, 25559, 24766(千米)4. 他们的公转周期分别

词根：lun = moon, 表示“月亮”

词根:lun = moon, 表示“月亮” lunar [lun月亮,-ar形容词后缀,…的] 月亮的,太阴的,似月的,新月形的 semilunar [semi-半,lun月亮,-ar形容词后缀,…的] 半月形的,月牙形的 demilune[/'dɛmɪ,lʊn/] [demi-半,lun月亮] 半月,新月,弯月 plenilune[/'pliːnɪljuːn,'ple/] [plen满,全,-i-,lun月亮] 满月,望月,月满之时 luniform [lun月亮,-i-,form如…形的]

在echart组件下用canvans画三角形

//使用的canvans绘制的三角形 drawArrow(){ var canvas = document.createElement('canvas');//创建一个元素 canvas.width = 10; canvas.height = 5; var ctx = canvas.getContext('2d'); this.draw(ctx,0,0,10,0,5,5,'#ecc818','fill'); return canvas; } draw(ctx,x1, y1, x2, y2, x3

threejs创建地球

上个月底,在朋友圈看到一个号称“这可能是地球上最美的h5”的分享,点进入后发现这个h5还很别致,思考了一会,决定要不高仿一个? 到今天为止,高仿基本完成, 线上地址 github地址除了手机端的media控制没有去兼容,其他的基本都给仿了. 那为了让你觉得是高仿,最好使用chrome的手机调试模式进行访问.微信打开将听不见声音看不到视频... (后面再有时间看是不是仿的再进一步) 之所以要仿它,因为觉得这个h5还挺酷,想看看自己需要花多长时间找到并实现它的技术路径. 需求分析这个h5的主要玩

opengl入门学习

OpenGL入门学习说起编程作图,大概还有很多人想起TC的#include <graphics.h>吧? 但是各位是否想过,那些画面绚丽的PC游戏是如何编写出来的?就靠TC那可怜的640*480分辨率.16色来做吗?显然是不行的. 本帖的目的是让大家放弃TC的老旧图形接口,让大家接触一些新事物. OpenGL作为当前主流的图形API之一,它在一些场合具有比DirectX更优越的特性. 1.与C语言紧密结合. OpenGL命令最初就是用C语言函数来进行描述的,对于学习过C语言的人来讲,Open

OpenGL入门学习(转)

OpenGL入门学习 http://www.cppblog.com/doing5552/archive/2009/01/08/71532.html 说起编程作图,大概还有很多人想起TC的#include <graphics.h>吧? 但是各位是否想过,那些画面绚丽的PC游戏是如何编写出来的?就靠TC那可怜的640*480分辨率.16色来做吗?显然是不行的. 本帖的目的是让大家放弃TC的老旧图形接口,让大家接触一些新事物. OpenGL作为当前主流的图形API之一,它在一些场合具有比Direct

opengl学习

#include"stdafx.h" #define GLUT_DISABLE_ATEXIT_HACK #include <GL/glut.h> //glut自动将gl.h和glu.h包含了 #include"math.h" #include <time.h> ; const GLfloat R = 20.0f; const GLfloat Pi = 3.1415926536f; // 太阳.地球和月亮 // 假设每个月都是30天 // 一年

OpenGL中的投影使用

OpenGL中的投影使用在OpenGL中,投影矩阵指定了可视区域的大小和形状.对于正投影与透视投影这两种不同的投影类型,它们分别有各自的用途. 正投影它适用于2D图形,如文本.建筑画图等.在它的应用场合,我们希望在屏幕上展示准确的物体大小和度量. 透视投影它使用透视除法,对距离观察者较远的物体进行缩短和收缩.由于可视区域前端和后端的宽度度量方法并不同样,导致两个逻辑大小同样的物体,当它们分别位于可视区域的前面和后面时,前者看上去要比后者大一些. 下图展示了平截头体(frustum)所定义的

OpenGL---------光照的基本知识

从生理学的角度上讲,眼睛之所以看见各种物体,是因为光线直接或间接的从它们那里到达了眼睛.人类对于光线强弱的变化的反应,比对于颜色变化的反应来得灵敏.因此对于人类而言,光线很大程度上表现了物体的立体感.请看图1,图中绘制了两个大小相同的白色球体.其中右边的一个是没有使用任何光照效果的,它看起来就像是一个二维的圆盘,没有立体的感觉.左边的一个是使用了简单的光照效果的,我们通过光照的层次,很容易的认为它是一个三维的物体. OpenGL对于光照效果提供了直接的支持,只需要调用某些函数,便可以实现简单的光