El código es este:
HTML:
<!DOCTYPE html>
<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]-->
<h1>My First Canvas Game
</h1>
<p><canvas id="canvas" width="900" height="450" style="background:#999"> Canvas not supported by your browser.
Ancho del borde del rectángulo:
<input type="range" id="ancho_del_cuadro" min="1" max="20" value="1" /><div id="ancho"></div></br><script type="application/javascript" src="game.js"></script>
JS:
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:
ancho_rectangulo = document.getElementById("ancho_del_cuadro").value;
por un:
ancho_rectangulo = 1;
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).
No se si es que he cogido el valor mal o que, pero me tiene loco.
Un saludo y gracias por leer!!