html 5-canvasとjavascriptを利用して3次元星空効果を生み出すコードが素晴らしいです!


ネット上から収集された純html 5-canvasおよびjavascriptを用いて3次元星空効果を生成するコード.コードのコア部分は「」タブに含まれる外部javascriptコード-html 5_3d_animation.js、すなわち、本明細書の第2セグメントコード.コードの考えは簡単です:各星にランダムなx,y,zの3つの(3次元)座標を与えて、それぞれ彼らの星空(canvas)の中の横座標の位置、縦座標の位置と3次元空間の中の尺度の情報を代表します.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);