一段很棒的利用html5-canvas及javascript產生三維星空效果的程式碼！
阿新 • • 發佈：2019-02-20
從網上搜集到的一段利用純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);