HTML:
Código
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!--[if lte IE 8]><meta http-equiv="X-UA-Compatible" content="chrome=1" /><![endif]--> </head> <body> <p><canvas id="canvas" width="900" height="450" style="background:#999"> Canvas not supported by your browser. </canvas></p> </br> <form name="registro"> </form> </body> </html>
JS:
Código
window.addEventListener('load',init,false); var canvas=null,ctx=null; var a=0,b=0,x=0,y=0,ce=1, ar=5; function init(){ canvas=document.getElementById('canvas'); x=canvas.height; y=canvas.width; ctx=canvas.getContext('2d'); run(); } function run(){ requestAnimationFrame(run); act(); paint(ctx); } function act(){ a+=ce; b+=ce; x-=ce*2; y-=ce*2; modificaciones(); } function random(max){ return Math.floor(Math.random()*max); } function modificaciones(){ ancho_rectangulo = document.getElementById("ancho_del_cuadro").value; ce=ancho_rectangulo; document.getElementById('ancho').innerHTML=ce; } function paint(ctx){ ctx.lineWidth=ce; ctx.strokeStyle='rgb('+random(255)+','+random(255)+','+random(255)+')'; ctx.strokeRect(a,b,y,x); } window.requestAnimationFrame=(function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback){window.setTimeout(callback,17);}; })();
El caso es que si yo cambio el:
Código
por un:
ancho_rectangulo = document.getElementById("ancho_del_cuadro").value;
Código
todo funciona bien, pero cuando pongo el otro es como si el valor de la variable aumentase (y eso que mas abajo inserta la variable en el html y sale un 1).
ancho_rectangulo = 1;
No se si es que he cogido el valor mal o que, pero me tiene loco.
Un saludo y gracias por leer!!