从网上搜集到的一段利用纯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);