利用html5-canvas及javascript产生三维星空效果的代码
来源:互联网 发布:linux支持哪些文件系统 编辑:程序博客网 时间:2024/05/22 06:55
从网上搜集到的一段利用纯html5-canvas以及javascript生成三维星空效果的代码。代码的核心部分是“<script></script>”标签中包含的外部javascript代码-html5_3d_animation.js,即本文的第二段代码。代码的思想很简单:赋予每颗星星随机的x,y,z三个(三维)坐标,分别代表他们在星空(canvas)中的横坐标位置,纵坐标位置以及在三维空间中的尺度信息。利用canvas将每颗星星画在画布上。然后利用javascript中全局变量即局部变量的特点来计算星星的下一个位置信息,重绘。。。只需一些简单的修改,就可令代码产生不同的效果!
- <html>
- <head>
- <title>Simple 3D on HTML5 canvas</title>
- <meta http-equiv="content-type" content="text/html; charset=UTF-8">
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
- <script type="text/javascript" src="html5_3d_animation.js"></script>
- <script language="javascript" type="text/javascript">
- $(function() {
- $("#html5_3d_animation").html5_3d_animation({
- window_width: '600',
- window_height: '300',
- window_background: '#00113F',
- star_count: '1000',
- star_color: '#FBFFAF',
- star_depth: '100'
- });
- });
- </script>
- </head>
- <body>
- <div class="wrap">
- <canvas id="html5_3d_animation">Internet Explorer Not
- Supported</canvas>
- <div id="show"></div>
- </div>
- <div style="width:98%;margin:20px auto; padding:50px 0; clear:both; overflow:hidden;">
- </body>
- </html>
html5_3d_animation.js
- (function(a){
- a.fn.html5_3d_animation=function(p){
- var p=p||{};
- var w_w=p&&p.window_width?p.window_width:"500";
- var w_h=p&&p.window_height?p.window_height:"400";
- var w_b=p&&p.window_background?p.window_background:"#000";
- var s_c=p&&p.star_count?p.star_count:"600";
- var s_color=p&&p.star_color?p.star_color:"#FFF";
- var s_d=p&&p.star_depth?p.star_depth:"250";
- var dom=a(this);
- var fov = parseInt(s_d);
- var SCREEN_WIDTH = parseInt(w_w);
- var SCREEN_HEIGHT = parseInt(w_h);
- var HALF_WIDTH = SCREEN_WIDTH/2;
- var HALF_HEIGHT = SCREEN_HEIGHT/2;
- var c_id = dom.attr("id");
- var numPoints = s_c;
- dom.attr({ width: w_w, height: w_h});
- setup();
- function setup()
- {
- function draw3Din2D(point3d)
- {
- x3d = point3d[0];
- y3d = point3d[1];
- z3d = point3d[2];
- var scale = fov/(fov+z3d);
- var x2d = (x3d * scale) + HALF_WIDTH;
- var y2d = (y3d * scale) + HALF_HEIGHT;
- c.lineWidth= scale;
- c.strokeStyle = s_color;
- c.beginPath();
- c.moveTo(x2d,y2d);
- c.lineTo(x2d+scale,y2d);
- c.stroke();
- }
- var canvas = document.getElementById(c_id);
- var c = canvas.getContext('2d');
- var points = [];
- function initPoints()
- {
- for (i=0; i<numPoints; i++)
- {
- point = [(Math.random()*400)-200, (Math.random()*400)-200 , (Math.random()*400)-200 ];
- points.push(point);
- }
- }
- function render()
- {
- c.fillStyle=w_b;
- c.fillRect(0,0, SCREEN_WIDTH, SCREEN_HEIGHT);
- for (i=0; i<numPoints; i++)
- {
- point3d = points[i];
- z3d = point3d[2];
- z3d-=4;
- if(z3d<-fov) z3d +=400;
- point3d[2] = z3d;
- draw3Din2D(point3d);
- }
- var show = document.getElementById('show');
- show.appendChild('p');
- }
- initPoints();
- var loop = setInterval(function(){
- render();
- }, 50);
- }
- }
- })(jQuery);
0 0
- 一段很棒的利用html5-canvas及javascript产生三维星空效果的代码!
- 利用html5-canvas及javascript产生三维星空效果的代码
- 基于canvas画布的星空效果
- 八大疯狂的HTML5 Canvas及WebGL动画效果
- 星空背景JavaScript代码
- Html5 canvas画星空 比较基础
- Html5学习---------canvas阴影效果的显示
- html5 canvas 一个漫天飞雪的效果
- HTML5 Canvas 实现的Loading效果
- 基于HTML5 canvas的jQuery刮刮卡效果
- 自制html5+canvas的刮刮卡效果
- 用HTML5的canvas实现抽奖刮刮卡的效果(只需十几行代码)
- JavaScript 旋转的星空
- 利用html5 canvas 画图的一个例子
- 利用HTML5 Canvas和Javascript实现的蚁群算法求解TSP问题演示
- 利用HTML5 Canvas和Javascript实现的蚁群算法求解TSP问题演示
- 利用html5画出五角星画出星空
- HTML5 canvas 效果
- bzoj 1057:棋盘制作(悬线法)
- Android开发之Android内存管理原理
- 滚动条滑到底部进行刷新
- 计算几何公式
- HDU 1285--确定比赛名次
- 利用html5-canvas及javascript产生三维星空效果的代码
- I/O多路转接之epoll
- Dubbo服务 初学配置
- Java中Object类的equals()和hashCode()方法
- c# 把excel表格当做数据库的使用感受
- SCPPO(十五):IIS配置文件节点加密
- leetcode算法——258:Add Digits(基于JAVA)
- 利用ObjectAnimator编写弹出式二级菜单
- ajax父页面main.html