I have one canvas-fx code ("stars" coming from deep to front, all centered, simulating space-navigation; it was not done by me) that I want to put in one website as a background. I want it so that when a user resizes the window (dragging to right or left or resizing or whatever), the effect can auto-adjust itself so that the stars always come from the center in any size or even changing the desktop resolution (I refer the FX can auto-reset by itself the same it does when rendering the webcode).Also I want it so that the code can adjust itself to the size of the content of the body (i.e. adding content from up to down, etc). Finally, how can I quit the bottom bar, leaving only the scroll bar from the right?Here is the complete code I am using:\[code\]<!DOCTYPE html><html lang="es"> <head> <meta charset="utf-8"> <title>FX TEST</title> <STYLE type="text/css"> html, body { width:100%; height:100%; } #Canvas2D { position:absolute; top:0; left:0; } #content { z-index: 10; position: relative; } </STYLE> <script language="JavaScript"> function setup() { var fov = 150; var SCREEN_WIDTH = 1920; var SCREEN_HEIGHT = 1080; var HALF_WIDTH = SCREEN_WIDTH / 2; var HALF_HEIGHT = SCREEN_HEIGHT / 2; var numPoints = 300; 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 = "rgb(255,255,255)"; c.beginPath(); c.moveTo(x2d, y2d); c.lineTo(x2d + scale, y2d); c.stroke(); } var canvas = document.getElementById('Canvas2D'); 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 = "rgb(0,0,0)"; c.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT); for(i = 0; i < numPoints; i++) { point3d = points; z3d = point3d[2]; z3d -= 4; if(z3d < -fov) z3d += 400; point3d[2] = z3d; draw3Din2D(point3d); } } initPoints(); var loop = setInterval(function () { render(); }, 50); } </script> </head> <body onload="setup();"> <canvas id="Canvas2D" width="1920" height="1080">NOT USING HTML5 SUPPORT</canvas> <div id="content"> <z-index: 0></z-index:> </div> </body></html>\[/code\]
Auto-adjust canvas by itself in all possible sizes
- Thread starter nkbapbt
- Start date