1

Necesito dibujar un canvas por cada elemento de la matriz, pero no me dibuja nada con el foreach , pero si saco el foreach y la function per y solo dejo el dibujo de #nodes si funciona , pero claramente solo me dibuja 1 vez

 b = [1,2,3,4,5];
    
    $(document).ready(function(){
    		
    	function per() {
    		console.log("per()");
    		 $('#nodes').css({
                'border-radius': '5px',
                'padding': '0',
                'margin': '0',
                'width': '200px',
                'height': '200px',
                'position': 'absolute',
                'right': '15px',
                'bottom': '15px'
    	
            });
    		
    	}
    
    	$('body').append('<canvas id="minimap"></canvas><canvas id="nodes"></canvas>');
    
            $('#minimap').css({
                'background': 'rgba(1,1,1,0.7',
                'border-radius': '0px',
                'border': '1px solid rgba(255,255,255,0.2)',
                'padding': '0',
                'margin': '0',
                'width': '200px',
                'height': '200px',
                'position': 'absolute',
                'right': '15px',
                'bottom': '15px'
            });
    	   b.forEach(per);
            
    		
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Nuevo problema: la respuesta de asier me sirve, el problema es que luego tengo una funcion fuera de todo este código que hace un document.getElementById , intenté haciendo document.getElementById($canvas); pero no me funcionó , que debo hacer?

function per() { for (var i = 0; b[i]; i++) { var $canvas = $("").css({ // bla bla }

}

1
  • Si tienes una pregunta nueva (relacionada aunque relamente no la misma), deberías crear una pregunta nueva en lugar de editar la que ya tienes
    – Alvaro Montoro
    Commented el 4 may. 2017 a las 13:23

1 respuesta 1

4

Tienes varios problemas en tu código.

La función per no crea ningún objeto, simplemente cambia el estilo del objeto nodes existente.

Tanto el canvas minimap como el nodes lo estás creando en la sentencia $('body').append

Después la función per sí se ejecuta 5 veces pero lo único que hace es cambiar 5 veces el estilo del canvas per (que como no tiene color de fondo no se llega a ver).

La función per debería crear el objeto canvas y añadirlo al DOM.

Mira el siguiente ejemplo. En la función per creo un nuevo objeto canvas y lo añado al body. Le he puesto color de fondo azul para que se vean los canvas y he quitado el posicionamiento absoluto para que no se posicionen uno encima de otro (para que se vean los 5).

La función per recibe como parámetro el elemento del array b que utiliza para dar un id diferente a cada canvas.

b = [1,2,3,4,5];
    
    $(document).ready(function(){
    		
    	function per(id) {
    		console.log(id);
    		 var $canvas = $('<canvas id="nodes' + id + '"></canvas>').css({
                'border-radius': '5px',
                'padding': '0',
                'margin': '0',
                'width': '200px',
                'height': '200px',
                //'position': 'absolute',
                'right': '15px',
                'bottom': '15px',
                'background-color': 'blue'
            });
          $('body').append($canvas);
    		
    	}
    
    	$('body').append('<canvas id="minimap"></canvas>');
    
            $('#minimap').css({
                'background': 'rgba(1,1,1,0.7',
                'border-radius': '0px',
                'border': '1px solid rgba(255,255,255,0.2)',
                'padding': '0',
                'margin': '0',
                'width': '200px',
                'height': '200px',
                'position': 'absolute',
                'right': '15px',
                'bottom': '15px'
            });
    	   b.forEach(per);
            
    		
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

4
  • muchas gracias ,pero el problema es que después necesito hacer un document.getElementById , como capturo cada canvas creado si no tienen id?
    – ESCM
    Commented el 4 may. 2017 a las 12:55
  • Puedes pasarle el valor del elemento de b a la función per y en base a ese valor darle un id diferente a cada canvas. Commented el 4 may. 2017 a las 13:21
  • eso se me ocurrio pero no tengo mucho conocimiento, edite mi pregunta con lo que intenté
    – ESCM
    Commented el 4 may. 2017 a las 13:24
  • He editado la respuesta para mostrar cómo hacerlo. El método forEach va a pasar a la función per cada elemento del array como argumento. Puedes utilizar este elemento para dar un id diferente a cada canvas. Commented el 4 may. 2017 a las 13:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.