您的位置：首页 > Web前端 > JavaScript

一段很棒的利用html5-canvas及javascript产生三维星空效果的代码！

2012-03-20 13:22 651 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航