Foros del Web » Creando para Internet » HTML »

[SOLUCIONADO] javascript canvas

Estas en el tema de javascript canvas en el foro de HTML en Foros del Web. Hola amigos buen día estoy trabajando en un pequeño ejercicio de canvas dada una coordenadas de un rectángulo este se debe de dibujar, ya lo ...
  #1 (permalink)  
Antiguo 22/03/2016, 00:12
 
Fecha de Ingreso: marzo-2016
Mensajes: 4
Antigüedad: 8 años
Puntos: 0
Pregunta javascript canvas

Hola amigos buen día estoy trabajando en un pequeño ejercicio de canvas
dada una coordenadas de un rectángulo este se debe de dibujar, ya lo hace lo que no puedo hacer es darle color al rectángulo no se que estoy haciendo mal o como podría solucionarlo, gracias les dejo el código

Código PHP:

<!DOCTYPE html>
<
html lang="en">
<
head>
    <
meta charset="UTF-8">
    <
link rel="stylesheet" href="estiloage.css">
   
</
head>


<
body>
   
   <
p>Dibujo un rectangulo</p>
   <
fieldset>
      <
legend>Coordenadas del rectangulo</legend>
       
x1<input type="text" id="x1">
       
y1<input type="text" id="y1">
       
x2<input type="text" id="x2">
       
y2<input type="text" id="y2">
       
Color <input type="color" id="color">
       <
input type="button" value="pintar" onclick="pintar()">
   </
fieldset>
   
   <
canvas width="700" height="700" style="border:solid; margin-left:20%; margin-top:2%;" id="canvas"></canvas>
    
    <
script>
        
        function 
pintar()
        { 
        
        var 
canvas document.getElementById("canvas");
        var 
ctx canvas.getContext("2d");
        
        
         
        var 
x1 parseInt document.getElementById("x1").value);
        var 
y1 parseInt document.getElementById("y1").value);
        var 
x2 parseInt document.getElementById("x2").value);
        var 
y2 parseInt document.getElementById("y2").value);
        var 
color =  document.getElementById("color").value;
        
            var 
cad " ' "color " ' ";
        
        
ctx.fillStyle cad;
        
ctx.fillRect(x1y1x2y2);
        
        }
            
    
</script>
  
</body>
</html> 
  #2 (permalink)  
Antiguo 22/03/2016, 02:24
Avatar de Pantera80  
Fecha de Ingreso: noviembre-2014
Ubicación: España
Mensajes: 35
Antigüedad: 9 años, 4 meses
Puntos: 6
Respuesta: javascript canvas

Buenas!!!

He probado con tu código, y depurando he visto que el problema está aquí:

Código Javascript:
Ver original
  1. var cad = " ' "+ color + " ' ";

Dado que Javascript cuando recoge el valor del color del input, ya le agrega las comillas.

Por tanto el código lo tienes que poner así:

Código Javascript:
Ver original
  1. var cad = color;

A mí así me ha funcionado

PD: esto debería estar en la sección de Javascript
  #3 (permalink)  
Antiguo 22/03/2016, 09:36
 
Fecha de Ingreso: marzo-2016
Mensajes: 4
Antigüedad: 8 años
Puntos: 0
Respuesta: javascript canvas

Gracias por la ayuda

Etiquetas: canvas, css, input, javascript, link, text
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:46.