Phiên bản đầy đủ: jsB@nk » 3D » JavaScript bay vào vũ trụ với HTML5 Canvas
URL: https://www.javascriptbank.com/javascript-3d-starfield-html5-canvas.html
Một hiệu ứng JavaScript kết hợp với thuộc tính HTML5 canvas để giả lập tình huống chúng ta bay vào vũ trụ, các vì sao là những đốm màu di chuyển.Đây là một mã nguồn JavaScript khá cơ bản nhưng có thể chạy tốt trên tất cả trình duyệt hiện đại.
Phiên bản đầy đủ: jsB@nk » 3D » JavaScript bay vào vũ trụ với HTML5 Canvas
URL: https://www.javascriptbank.com/javascript-3d-starfield-html5-canvas.html
<!--[if IE]><script type="text/javascript" src="http://explorercanvas.googlecode.com/svn-history/r48/trunk/silverlight/excanvas.js"></script><![endif]--><script type="text/javascript" from="JavaScriptBank.com">/* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/ // Copyright Christopher Thomas 2007 // All rights reserved.var canvas;var ctx;var points;var NUMPOINTS = 500;var LINE = false;var FOO = 0;var xshift = 0;var yshift = 0;var xtarg = 0;var ytarg = 0;var timer;function go() { canvas = document.getElementById("theCanvas"); ctx = canvas.getContext("2d"); points = []; for (var i=0; i<NUMPOINTS; i++) { FOO = i; var z = i*.2+1; var x = Math.random() * 2400 - 1200; var y = Math.random() * 2400 - 1200;/* x = 800*Math.cos(i/20 * Math.PI * 2); y = 800*Math.sin(i/20 * Math.PI * 2);*/ points[i] = {x: x, y: y, z: z, c: color()}; } timer = setInterval(update, 16);}function paint() { ctx.save(); ctx.fillStyle = "rgb(0, 0, 0)"; ctx.fillRect(0, 0, 800, 600); ctx.translate(400, 300); var start = NUMPOINTS-1; var alpha = Math.pow(1-points[start].z/(NUMPOINTS*.2+1), 2); alpha = Math.max(alpha, .01); var color = points[start].c.replace(/ALPHA/, alpha); if (LINE) { ctx.strokeStyle = color; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(points[start].x / points[start].z, points[start].y / points[start].z); } for (var i=start; i>=0; i--) { var scaledX = (xshift + points[i].x) / points[i].z; var scaledY = (yshift + points[i].y) / points[i].z; if (LINE) { ctx.lineTo(scaledX, scaledY); ctx.stroke(); } //ctx.strokeRect(scaledX - 2, scaledY - 2, 4, 4); ctx.beginPath(); ctx.arc(scaledX, scaledY, 25/points[i].z, 0, Math.PI*2, false); ctx.fill(); var alpha = Math.pow(1-points[i].z/(NUMPOINTS*.2+1), 2); alpha = Math.max(alpha, .01);alpha = 1; color = points[i].c.replace(/ALPHA/, alpha); ctx.strokeStyle = color; ctx.fillStyle = color; if (LINE) { ctx.beginPath(); ctx.moveTo(scaledX, scaledY); } } ctx.stroke(); ctx.restore();}function update() { if (Math.abs(xshift - xtarg) < 20) xtarg = Math.random()*1000-500; if (Math.abs(yshift - ytarg) < 20) ytarg = Math.random()*1000-500; var dx = (xtarg - xshift); var dy = (ytarg - yshift); var len = Math.sqrt(dx*dx+dy*dy); dx /= len; dy /= len; xshift += dx*10; yshift += dy*10; for (var i=0; i<NUMPOINTS; i++) { points[i].z-= .25; if (points[i].z <= .3){ points.shift(); i--; FOO++; var x = 800*Math.cos(FOO/20 * Math.PI * 2); var y = 800*Math.sin(FOO/20 * Math.PI * 2); var x = Math.random() * 2400 - 1200; var y = Math.random() * 2400 - 1200; var z = NUMPOINTS*.2+1; points.push({x: x, y: y, z: z, c: color()}); } } paint();}function color() { var r = (Math.sin(FOO/25)+1)/2; var g = (Math.sin(FOO/25 + Math.PI / 3)+1)/2; var b = (Math.sin(FOO/25 + Math.PI * 2/ 3)+1)/2; r = r * r; g = g * g; b = b * b; var l = Math.sqrt(r*r+g*g+b*b); r /= l; g /= l; b /= l; r *= 200; g *= 200; b *= 200; r = parseInt(r); g = parseInt(g); b = parseInt(b); return "rgba("+r+","+g+","+b+",ALPHA)";}window.onload = go;</script><canvas id="theCanvas" width="800" height="600" style="border: 1px solid blue;"/></canvas>