September 10, 201214 yr Hi this is my first time on the forum, hopefully I haven't done it wrong :E I have found that this script is causing me problems - it seems to work fine under Firefox, Chrome, Opera, but when I launch Firebug, then refresh the page, I get hangs. The debugging/error reporting doesn't help me much. Is it possible that the Math.random usage is crashing it? I have isolated the crash down to the following script. This can be saved as a html file, you need to supply a png image, preferebly with some transparency (I would supply one but I don't want to link to a clients unreleased files - heres a random smiley face http://www.wpclipart...miley_large.png) It needs to be put in /images/ relative to the html, and names 'logo.png'. <DOCTYPE html> <html> <head> <script type="text/javascript"> var EML = new Image(); // Logo EML.src = "images/logo.png"; const FPS=20; var canvas; var context2D; function logo() { this.x = 100; // x pos this.y = 100; // y pos this.op = 1; // opacity this.xvel = 1; // velocity this.yvel = 1; this.sz = 1; // scale } var logos = new Array(); window.addEventListener('resize', resizeCanvas, false); window.onload = init; function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } function rand($number) { $number = Math.random()*$number; return $number; } function setLogos() { for (xx = 0; xx < 9; xx++) { logos[xx] = new logo; $currentWidth = canvas.width; logos[xx].x = rand($currentWidth)-EML.width; $currentHeight = canvas.height; logos[xx].y = rand($currentHeight)-EML.height; logos[xx].op = rand(1); logos[xx].sz = rand(1); logos[xx].xvel = rand(1)-0.5; logos[xx].yvel = rand(1)-0.5; if (logos[xx].x < 0 || logos[xx].y < 0 || logos[xx].x > (canvas.width-EML.width) || logos[xx].y > (canvas.height-EML.height)|| (logos[xx].velx > -0.1 && logos[xx].velx < 0.1) || (logos[xx].vely > -0.1 && logos[xx].vely < 0.1)) { xx -= 1; } } } function init() { canvas = document.getElementById('canvas'); context2D = canvas.getContext('2d'); resizeCanvas(); setLogos(); setInterval(draw, 1000/FPS); } function draw() { update(); context2D.clearRect(0, 0, canvas.width, canvas.height); for (xx = 0; xx < logos.length; xx++){ context2D.globalAlpha = logos[xx].op; context2D.drawImage(EML, logos[xx].x, logos[xx].y, (EML.width*logos[xx].sz), (EML.height*logos[xx].sz)); } } function update() { for (xxx = 0; xxx < logos.length; xxx++){ logos[xxx].x += (logos[xxx].xvel); logos[xxx].y += (logos[xxx].yvel); if (logos[xxx].x > (canvas.width)){ logos[xxx].x = (0-(EML.width*logos[xxx].sz)); } if (((logos[xxx].x+(EML.width*logos[xxx].sz)) < 0) && (logos[xxx].xvel < 0)){ logos[xxx].x = canvas.width; } if (logos[xxx].y > (canvas.height)){ logos[xxx].y = (0-(EML.height*logos[xxx].sz)); } if (((logos[xxx].y+(EML.height*logos[xxx].sz)) < 0) && (logos[xxx].yvel < 0)){ logos[xxx].y = canvas.height; } } } </script> <style type="text/css"> #canvas { width:100%; height:100%; background:none; margin:0px; padding:0px; } body { background-color:green; } </style> </head> <body> <canvas id="canvas"> Browser not compatible with canvas. </canvas> </body> </html> Edited September 10, 201214 yr by RickyT23
Create an account or sign in to comment