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

利用html5-canvas及javascript产生三维星空效果的代码

2016-08-10 23:16 639 查看

从网上搜集到的一段利用纯html5-canvas以及javascript生成三维星空效果的代码。代码的核心部分是“<script></script>”标签中包含的外部javascript代码-html5_3d_animation.js，即本文的第二段代码。代码的思想很简单：赋予每颗星星随机的x,y,z三个（三维）坐标，分别代表他们在星空（canvas）中的横坐标位置，纵坐标位置以及在三维空间中的尺度信息。利用canvas将每颗星星画在画布上。然后利用javascript中全局变量即局部变量的特点来计算星星的下一个位置信息，重绘。。。只需一些简单的修改，就可令代码产生不同的效果！

[javascript]
view plain
copy

<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

[javascript]
view plain
copy

(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);

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

标签：

相关文章推荐

新的分享

章节导航