Dibujar con eventos

Clase 20 de 50 • Curso de Programación Básica 2014

Luis Lauro Meza Rendon

student•

Como observación, ¿notaron que cada vez el profesor tenia que volver a cargar la grilla para que no se empalmaran todas las lineas que ya estaban trazadas?, ese detalle se soluciona limpiando el canvas cada vez que el usuario ingrese el ancho de la linea se volvera a trazar desde cero, aqui dejo el codigo, se puede poner al inicio de la funcion dibujarGrilla

function limpiar()  
{  
    dibujo.width = 300;  
    dibujo.height = 300;  
}

Christian rebellon

student•

no me funciona la funcion limpiar y como se puede restringir que solo digiten numeros

Richard Álvarez

student•

Gracias por el aporte amigo!

Orestes Sotomayor

student•

aca les dejo la tarea me :)

var dibujo, lienzo, t, b;  
function inicio()  
{  
    t = document.getElementById("usuario");  
    b = document.getElementById("dibujalo");  
    dibujo = document.getElementById("dibujito");  
    lienzo = dibujo.getContext("2d");  
    b.addEventListener("click", dibujarGrilla);  
}  
function dibujarGrilla(pony)  
{  
    var pony = lienzo;  
    var rayas = Number(t.value);  
    var ancho = 300 , alto = 300;  
    var linea, punto, lineaDos;  
    var anchoLinea = ancho / rayas;  
    var limiteX = ancho / anchoLinea;  
    var limiteY = alto / anchoLinea;  
  
    for(linea = 0; linea <= limiteX; linea++)  
    {  
        punto= linea * anchoLinea;   
        pony.beginPath();  
        pony.strokeStyle = "#0084bc";  
        pony.moveTo(0, punto);  
        pony.lineTo(punto, ancho);  
        pony.stroke();  
        pony.closePath();  
    }  
    for(linea = 0; linea <= limiteY; linea++)  
    {  
        punto= linea * anchoLinea;  
        pony.beginPath();  
        pony.strokeStyle = "#00638c";  
        pony.moveTo(punto, 0);  
        pony.lineTo(ancho, punto);  
        pony.stroke();  
        pony.closePath();  
    }  
    var liena2, punto2, punto3;  
    for(linea = 0, linea2 = ancho; linea <= limiteX; linea++, linea2-anchoLinea)  
    {  
        punto= linea * anchoLinea;  
        punto2= linea2;  
        punto3=linea2-punto;  
        pony.beginPath();  
        pony.strokeStyle = "#004b6b";  
        pony.moveTo(punto2, punto);  
        pony.lineTo(punto3, alto);  
        pony.stroke();  
        pony.closePath();  
    }  
    for(linea = 0, linea2 = ancho; linea <= limiteY; linea++, linea2-anchoLinea)  
    {  
        punto= linea * anchoLinea;  
        punto2= linea2;  
        punto3=linea2-punto;  
        pony.beginPath();  
        pony.strokeStyle = "#00273b";  
        pony.moveTo(punto3, 0);  
        pony.lineTo(0, punto);  
        pony.stroke();  
        pony.closePath();  
    }  
    for(linea = 0, linea2 = ancho; linea <= limiteY; linea++, linea2-anchoLinea)  
    {  
    punto= linea * anchoLinea;  
    punto2= linea2;  
    punto3=linea2-punto;  
    pony.beginPath();  
    pony.strokeStyle = "#009ee3";  
    pony.arc(150,150,punto, (Math.PI * 2), false);  
    pony.stroke();  
    pony.closePath();  
    }  
  
}

Emi Garcia

student•

var dibujo, lienzo, t, b, r;
function inicio()
{
t= document.getElementById("usuario")
b= document.getElementById("boton")
r=document.getElementById("borrar")
dibujo=document.getElementById("dibujito");
lienzo= dibujo.getContext("2d");

b.addEventListener("click",dibujarGrilla);
r.addEventListener("click", refresh);

lienzo.beginPath();
lienzo.strokeStyle="#00F"
lienzo.arc(150,150,50,(Math.PI * 2), false);
lienzo.closePath();
lienzo.stroke();

}
function refresh()
{
location.reload();
}

function dibujarGrilla()
{
lienzo = dibujo.getContext("2d");
var ancho = 300, alto = 300;
var raya= Number(t.value);
for (var linea = 0; linea <= 600; linea++)
{

lienzo.beginPath();
lienzo.strokeStyle="#AAA";
lienzo.moveTo((linea * raya),0);
lienzo.lineTo(0,(linea*raya));
lienzo.closePath();
lienzo.stroke();
};

for (var linea = 0; linea <= 600; linea++)
{

lienzo.beginPath();
lienzo.strokeStyle="#AAA";
lienzo.moveTo((ancho-(linea*raya)),0);
lienzo.lineTo(300,0+(linea*raya));
lienzo.closePath();
lienzo.stroke();
};

Emi Garcia

student•

Aca les dejo mi ejercicio, le agregue un boton de limpiar con la funcion location.reload:

var dibujo, lienzo, t, b, r;  
function inicio()  
{  
    t= document.getElementById("usuario")  
    b= document.getElementById("boton")  
    r=document.getElementById("borrar")  
    dibujo=document.getElementById("dibujito");  
    lienzo= dibujo.getContext("2d");  
      
    b.addEventListener("click",dibujarGrilla);  
    r.addEventListener("click", refresh);      
  
    lienzo.beginPath();  
    lienzo.strokeStyle="#00F"  
    lienzo.arc(150,150,50,(Math.PI * 2), false);  
    lienzo.closePath();  
    lienzo.stroke();  
      
  
}  
function refresh()  
{  
    location.reload();  
}  
  
function dibujarGrilla()  
{  
    lienzo = dibujo.getContext("2d");  
    var ancho = 300, alto = 300;  
    var raya= Number(t.value);  
    for (var linea = 0; linea <= 600; linea++)  
    {  
  
        lienzo.beginPath();  
        lienzo.strokeStyle="#AAA";  
        lienzo.moveTo((linea * raya),0);  
        lienzo.lineTo(0,(linea*raya));  
        lienzo.closePath();  
        lienzo.stroke();  
    };  
  
    for (var linea = 0; linea <= 600; linea++)  
    {  
  
        lienzo.beginPath();  
        lienzo.strokeStyle="#AAA";  
        lienzo.moveTo((ancho-(linea*raya)),0);  
        lienzo.lineTo(300,0+(linea*raya));  
        lienzo.closePath();  
        lienzo.stroke();  
    };

Csar

student•

Antes que nada, deseo enviar mis felicitaciones al equipo PLETZI, por tan buen trabajo. Y agradecerles, por permitirnos aprender junto a uds.

Tal como en mis mejores tiempos de estudiante rebelde, no he realizado cada una de las tareas indicadas por nuestro estimado facilitador Freddy Vega. Sin embargo, realicé un único ejemplo que utiliza o abarca la mayoría de las herramientas enseñadas hasta este punto (video nro. 20).

A continuación "Mi humilde Aporte":

Archivo HTML: srcMiAporte.html

<!DOCTYPE html> <html> <head>

<title>Mi humilde aporte en JavaScript</title>

</script>

</head> <body>

<h1>Primer Proyecto <br /> de Programación</h1>

<p>Bienvenidos a mi Primer Proyecto en HTML</p>

prgInicio();

</script>

</body> </html>

Archivo JAVASCRIPT: srcMiAporte.js

//ADVERTENCIA: En este programa se hace uso de la función "navigator", sólo para fines de validar

//el lugar dónde se encuentra el usuario y sólo con fines educativos. En este programa no se registran,

//guardan o almacenan ningún tipo de datos declarados en el mismo. Ud. puede cancelar o no permitir

//que se active dicha función.

//Estos son mi valores de Entrada:

// 1) Nombre de la Persona a Evaluar: Freddy Vega

// 2) Para la pregunta 1: mi valor indicado es 4

// 3) Para la pregunta 2: mi valor indicado es 4

// 4) Para la pregunta 3: mi valor indicado es 4

// 5) Para la pregunta 4: mi valor indicado es 3

// 6) Para la pregunta 5: mi valor indicado es 2

// 7) Para la pregunta 6: mi valor indicado es 1

//A continuación voy a definir un arreglo, cuyos valores son los atributos de una persona

//Este arreglo (unidimensional) estará declarado de forma Global, es decir,

//su alcance o mejor dicho ciclo de vida comienza desde su declaración y culmina

//al momento de terminar la ejecución del programa. *(1) Ver notas al final.

//Y declaro otro arreglo, esta vez bi-dimensional (matriz de 3 x 5), llamado arrayOpinion.

var arrayCaracteristicas = ["EXPERTO", "CONCISO", "SINCERO", "PRECAVIDO", "SOEZ", "SOBRADO"];

var arrayOpinion = [["Pésimo", "Malo", "Regular", "Bueno", "Muy Bueno"],

["Nada", "Vagamente", "Regularmente", "Muy", "Extremadamente"],

["Extremadamente", "Muy", "Regularmente", "Vagamente", "Nada"]];

//Es una “buena práctica” (tratar en lo posible), colocar como parte del nombre de variable

//el tipo de dato de la misma, por ejemplo: intPersona es una variable que voy a utilizar

//para almacenar u operar con valores enteros (int, abreviatura de integer) y la variable

//strPersona me permitirá almacenar cadena de caracteres (ejm: nombres, apellidos),

//lo podemos escribir en el idioma que mejor nos parezca. *(2)

var intPersona;

var strPersona;

var cttHappyFace = 1;

var cttSadFace = 2;

var cttAngryFace = 3;

var intMinAtributo = 1;

var intMaxAtributo = 5;

var intCntAtributo = 6;

var strNombrePersona;

var strApellidoPersona;

var intOpinion;

var strOpinion;

var intIdxAtributos;

var intCntIntentos = 0;

var intMaxIntentos = 3;

var blnSalidaIntentos;

var intFilaOpinion;

var ctxTablaAtributo, cnvTablaAtributo;

var intTotBog = [0,0,0,0,0,0];

var intTotRst = [0,0,0,0,0,0];

var intPuntos = [[0,0,0,0,0],

[0,0,0,0,0],

[0,0,0,0,0]];

var dblPorcnt = [[0,0,0,0,0],

[0,0,0,0,0],

[0,0,0,0,0]];

var blnEsBog=false;

var strPara;

var strNombre = "César";

var strApellido = "Chacón";

//En esta función dibujaremos el tipo de carita (feliz, triste, a punto de explotar)

function fncPintarCaritas(prmTipoCaritas,prmTablaAtributo,prmTipoAtributo)

{

//Declaración de variables locales. *(3)

var cnvTipoCaritas;

var hexCaraColorContorno, hexCaraColorRelleno;

var hexOjosColorContorno, hexOjosColorRelleno;

var hexBocaColorContorno, hexBocaColorRelleno;

var fltCaraRadianes, fltOjosRadianes, fltBocaRadianes;

var intCaraEjeX, intCaraEjeY, intCaraRadio;

var intBocaEjeX, intBocaEjeY, intBocaRadio;

var intOjoDerEjeX, intOjoDerEjeY, intOjoDerRadio;

var intOjoIzqEjeX, intOjoIzqEjeY, intOjoIzqRadio;

//El uso de una determinada instrucción, tiene su razón de ser. *(4)

switch (prmTipoAtributo)

{

case "EXPERTO":

intCaraEjeX = 225;

break;

case "CONCISO":

intCaraEjeX = 225 + 150;

break;

case "SINCERO":

intCaraEjeX = 225 + 150 * 2;

break;

case "PRECAVIDO":

intCaraEjeX = 225 + 150 * 3;

break;

case "SOEZ":

intCaraEjeX = 225 + 150 * 4;

break;

case "SOBRADO":

intCaraEjeX = 225 + 150 * 5;

break;

}

intCaraEjeY = 450;

if (prmTipoCaritas != 0)

{

//Asignamos las característicaas de una carita feliz

fltCaraRadianes = Math.PI*2;

if (prmTipoCaritas == cttHappyFace)

{

hexCaraColorContorno = "#000000"; hexCaraColorRelleno = "#FFFF00";

hexBocaColorContorno = "#000000"; hexBocaColorRelleno = "#FFFF00";

hexOjosColorContorno = "#000000"; hexOjosColorRelleno = "#FFFF00";

fltOjosRadianes = Math.PI*2; fltBocaRadianes = Math.PI*2;

}

//Asignamos las característicaas de una carita triste

else if (prmTipoCaritas == cttSadFace)

{

hexCaraColorContorno = "#000000"; hexCaraColorRelleno = "#FFFF00";

hexBocaColorContorno = "#000000"; hexBocaColorRelleno = "#FFFF00";

hexOjosColorContorno = "#000000"; hexOjosColorRelleno = "#000000";

fltOjosRadianes = Math.PI*2; fltBocaRadianes = Math.PI;

}

//Asignamos las característicaas de una carita de mal humor o a punto de explotar

else if (prmTipoCaritas == cttAngryFace)

{

hexCaraColorContorno = "#000000"; hexCaraColorRelleno = "#FF0000";

hexBocaColorContorno = "#000000"; hexBocaColorRelleno = "#000000";

hexOjosColorContorno = "#000000"; hexOjosColorRelleno = "#000000";

fltOjosRadianes = Math.PI; fltBocaRadianes = Math.PI;

}

//Valores comunes para todos los tipos de cara

intCaraRadio = 30;

intBocaEjeX = intCaraEjeX;

intBocaEjeY = intCaraEjeY + 10;

intBocaRadio = (intCaraRadio/10)*2;

intOjoDerEjeX = intCaraEjeX + 10;

intOjoDerEjeY = intCaraEjeY - 10;

intOjoDerRadio = intCaraRadio/10;

intOjoIzqEjeX = intCaraEjeX - 10;

intOjoIzqEjeY = intCaraEjeY - 10;

intOjoIzqRadio = intCaraRadio/10;

//Ahora, ya que hemos calculado los valores del tipo de cara, la dibujamos

//Esta es la cara

prmTablaAtributo.strokeStyle = hexCaraColorContorno;

prmTablaAtributo.fillStyle = hexCaraColorRelleno;

prmTablaAtributo.beginPath();

prmTablaAtributo.arc(intCaraEjeX,intCaraEjeY,intCaraRadio,fltCaraRadianes,false);

prmTablaAtributo.closePath();

prmTablaAtributo.stroke();

prmTablaAtributo.fill();

//Ojo izquierdo

prmTablaAtributo.strokeStyle = hexOjosColorContorno;

prmTablaAtributo.fillStyle = hexOjosColorRelleno;

prmTablaAtributo.beginPath();

prmTablaAtributo.arc(intOjoIzqEjeX,intOjoIzqEjeY,intOjoIzqRadio,fltOjosRadianes,false);

prmTablaAtributo.closePath();

prmTablaAtributo.stroke();

prmTablaAtributo.fill();

//Ojo derecho

prmTablaAtributo.strokeStyle = hexOjosColorContorno;

prmTablaAtributo.fillStyle = hexOjosColorRelleno;

prmTablaAtributo.beginPath();

prmTablaAtributo.arc(intOjoDerEjeX,intOjoDerEjeY,intOjoDerRadio,fltOjosRadianes,false);

prmTablaAtributo.closePath();

prmTablaAtributo.stroke();

prmTablaAtributo.fill();

//Y esta es la boca

prmTablaAtributo.strokeStyle = hexBocaColorContorno;

prmTablaAtributo.fillStyle = hexBocaColorRelleno;

prmTablaAtributo.beginPath();

prmTablaAtributo.arc(intBocaEjeX,intBocaEjeY,intBocaRadio,fltBocaRadianes,false);

prmTablaAtributo.closePath();

prmTablaAtributo.stroke();

prmTablaAtributo.fill();

//Le voy a dar un toque adicional a la carita feliz

if (prmTipoCaritas == cttHappyFace)

{

prmTablaAtributo.strokeStyle = hexCaraColorRelleno;

prmTablaAtributo.fillStyle = "#FFA500";

prmTablaAtributo.beginPath();

prmTablaAtributo.arc(intOjoIzqEjeX-5,intOjoIzqEjeY+13,5,(Math.PI*2),false);

prmTablaAtributo.closePath();

prmTablaAtributo.stroke();

prmTablaAtributo.fill();

prmTablaAtributo.strokeStyle = hexCaraColorRelleno;

prmTablaAtributo.fillStyle = "#FFA500";

prmTablaAtributo.beginPath();

prmTablaAtributo.arc(intOjoDerEjeX+5,intOjoDerEjeY+13,5,(Math.PI*2),false);

prmTablaAtributo.closePath();

prmTablaAtributo.stroke();

prmTablaAtributo.fill();

}

else

{

prmTablaAtributo.strokeStyle="black"; //color externo

prmTablaAtributo.fillStyle="black"; //color de relleno

prmTablaAtributo.font="bold 20px arial"; //formato del texto

prmTablaAtributo.strokeText("-",intCaraEjeX,intCaraEjeY); //texto con método stroke

prmTablaAtributo.fillText("-",intCaraEjeX,intCaraEjeY); //texto con método fill

}

//Aquí seleccionaremos o determinaremos el tipo de carita (feliz, triste, a punto de explotar)

//que deseamos mostrar.

function fncTipoCaritas(prmOpinion,prmAtributo,prmTablaAtributo)

{

switch (prmOpinion)

{

//Seleccionamos carita feliz (esta es la que más vas a obtener, eso creo)

case prmOpinion = 5:

case prmOpinion = 4:

intTipoCaritas = cttHappyFace;

break;

//Seleccionamos carita triste (es posible mejorar, no desesperes)

case prmOpinion = 3:

case prmOpinion = 2:

intTipoCaritas = cttSadFace;

break;

//Seleccionamos carita a punto de explotar (definitivamente debes cambiar, eso espero)

case prmOpinion = 1:

intTipoCaritas = cttAngryFace;

break;

//Mensaje a informar al usuario, no se cumplió ninguna de las condiciones anteriores.

default:

alert ("El valor esperado, se encuentra fuera de rango. Los valores válidos son: 1 al 5");

intTipoCaritas = 0;

break;

}

fncPintarCaritas(intTipoCaritas,prmTablaAtributo,prmAtributo);

}

//Funcion que permite llenar varias filas de nuestra Tabla de Atributos.

function fncLlenarFilas(prmTablaAtributo)

{

var intTxtEjeX, intTxtEjeY;

var intFila, intColumna, intEvaluac;

var srcText;

//Como la variable "intIdxAtributos" fue declarada como una variable global, la puedo invocar

//desde cualquier punto del programa. Debemos ser cuidadosos con el uso de las variables globales,

//ya que debido a lo anterior se puede cometer el error de cambiar un valor no deseado.

prmTablaAtributo.strokeStyle="black";

prmTablaAtributo.fillStyle="black";

prmTablaAtributo.font="bold 15px arial";

for(intFila=1; intFila<=4; intFila++)

{

intTxtEjeY = 160 + (100 * (intFila - 1));

if (intFila == 1)

{

for(intIdxAtributos=0; intIdxAtributos<intCntAtributo; intIdxAtributos++)

{

for(intEvaluac=0; intEvaluac<intMaxAtributo; intEvaluac++)

{

srcText = intPuntos[intIdxAtributos][intEvaluac];

intTxtEjeX = 153 + (150 * intIdxAtributos) + (30 * intEvaluac);

prmTablaAtributo.strokeText(srcText,intTxtEjeX,intTxtEjeY);

prmTablaAtributo.fillText(srcText,intTxtEjeX,intTxtEjeY);

}

else if (intFila == 2)

{

for(intIdxAtributos=0; intIdxAtributos<intCntAtributo; intIdxAtributos++)

{

for(intEvaluac=0; intEvaluac<intMaxAtributo; intEvaluac++)

{

srcText = dblPorcnt[intIdxAtributos][intEvaluac];

intTxtEjeX = 153 + (150 * intIdxAtributos) + (30 * intEvaluac);

prmTablaAtributo.strokeText(srcText,intTxtEjeX,intTxtEjeY);

prmTablaAtributo.fillText(srcText,intTxtEjeX,intTxtEjeY);

}

else if (intFila == 3)

{

for(intIdxAtributos=0; intIdxAtributos<intCntAtributo; intIdxAtributos++)

{

srcText = intTotBog[intIdxAtributos];

intTxtEjeX = 222 + (150 * intIdxAtributos);

prmTablaAtributo.strokeText(srcText,intTxtEjeX,intTxtEjeY);

prmTablaAtributo.fillText(srcText,intTxtEjeX,intTxtEjeY);

}

else if (intFila == 4)

{

intTxtEjeY = intTxtEjeY + 100;

for(intIdxAtributos=0; intIdxAtributos<intCntAtributo; intIdxAtributos++)

{

srcText = intTotRst[intIdxAtributos];

intTxtEjeX = 222 + (150 * intIdxAtributos);

prmTablaAtributo.strokeText(srcText,intTxtEjeX,intTxtEjeY);

prmTablaAtributo.fillText(srcText,intTxtEjeX,intTxtEjeY);

}

//Funcion que permite determinar el lugar donde se encuentra el usuario.

function fncPosGlobal(prmPos)

{

//Con esta condición podemos validar que el usuario se encuentra en Bogotá

if (prmPos.coords.latitude >= 4.554841177116837 && prmPos.coords.latitude <= 4.948988736258706 && prmPos.coords.longitude >= -74.33661425000003 && prmPos.coords.longitude <= -73.98505175000003)

{

blnEsBog = true;

}

//Esta condición, lo contrario a la condición anterior podemos determinar que el usuario no está en Bogotá

else

{

blnEsBog = false;

}

//Inicio del programa, en las líneas anteriores declaramos: variables,

//estructuras de datos (arreglos) y funciones

function prgInicio()

{

var intLineaVer;

var intLineaHor;

var intCntItem = 6;

var arrayTituloFila = ["Puntuación", "Porcentaje", "Sólo Bogotá", "Ánimo", "Total..."];

var arrayOpinion1 = [["P", "M", "R", "B", "MB"],

["N", "V", "R", "M", "E"],

["E", "M", "R", "V", "N"]];

navigator.geolocation.getCurrentPosition(fncPosGlobal);

strPersona = strNombre + " " + strApellido;

//alert es una función.

//Los paréntesis "()" permiten pasar parámetros, por Valor o Referencia

//Las comillas "", permiten mostrar cadenas de texto encontradas entre ellas.

//Y con las dos barras o doble “slash”, podemos intradocumentar nuestro programa,

//colocar comentarios como este y las cuatro (4) líneas anteriores.

alert("Gracias equipo PLETZI, por ofrecer de manera gratuita el curso Básico de JavaScript!!!");

//El salto de línea (retorno de carro), se coloca con "back slash n, esto es: \n"

alert("Desde Venezuela, " + strPersona + "\n" + "les manda un gran saludo y les desea mucho éxito.");

strNombrePersona = prompt("Informa el nombre de la persona que deseas evaluar. Luego, presiona click en OK para continuar.");

if (strNombrePersona != null)

{

//Dibujamos una tabla con el total de atributos a evaluar.

ctxTablaAtributo = document.getElementById("cnvTablaAtributos");

cnvTablaAtributo = ctxTablaAtributo.getContext("2d");

cnvTablaAtributo.moveTo(0,0);

cnvTablaAtributo.lineTo(1050,0);

cnvTablaAtributo.lineTo(1050,600);

cnvTablaAtributo.lineTo(0,600);

cnvTablaAtributo.lineTo(0,0);

cnvTablaAtributo.strokeStyle = "#AA000F";

cnvTablaAtributo.stroke();

//Se marcan las líneas Verticales de la tabla.

for(intIdxAtributos=0; intIdxAtributos<intCntAtributo; intIdxAtributos++)

{

cnvTablaAtributo.moveTo(150*(intIdxAtributos+1),0);

cnvTablaAtributo.lineTo(150*(intIdxAtributos+1),600);

//Se escriben los títulos de las columnas.

cnvTablaAtributo.strokeStyle="blue";

cnvTablaAtributo.font="bold 20px arial";

cnvTablaAtributo.strokeText(arrayCaracteristicas[intIdxAtributos],150*(intIdxAtributos+1)+20,60); //texto con método stroke

}

//Se marcan las líneas Horizontales de la tabla.

for(intLineaHor=0; intLineaHor<intCntItem; intLineaHor++)

{

cnvTablaAtributo.moveTo(0,100*(intLineaHor+1));

cnvTablaAtributo.lineTo(1050,100*(intLineaHor+1));

if (intLineaHor==1 || intLineaHor==2)

{

for(intIdxAtributos=1; intIdxAtributos<=intCntAtributo; intIdxAtributos++)

{

//Se marcan las líneas Verticales de un conjunto de celdas, pertenecientes a la fila 2 y 3 de la tabla.

for(intLineaVer=0; intLineaVer<intMaxAtributo; intLineaVer++)

{

cnvTablaAtributo.moveTo((150*intIdxAtributos)+((150/intMaxAtributo)*(intLineaVer+1)),100*(intLineaHor));

cnvTablaAtributo.lineTo((150*intIdxAtributos)+((150/intMaxAtributo)*(intLineaVer+1)),100*(intLineaHor+1));

//Se escriben las letras iniciales de las evaluaciones de cada atributo o característica.

cnvTablaAtributo.strokeStyle="black"; //color externo

cnvTablaAtributo.fillStyle="gray"; //color de relleno

cnvTablaAtributo.font="bold 15px arial"; //formato del texto

if (intIdxAtributos > 4)

{

intFilaOpinion = 2;

}

else if (intIdxAtributos > 1 && intIdxAtributos < 5)

{

intFilaOpinion = 1;

}

else if (intIdxAtributos = 1)

{

intFilaOpinion = 0;

}

cnvTablaAtributo.strokeText(arrayOpinion1[intFilaOpinion][intLineaVer],((150*intIdxAtributos)+((150/intMaxAtributo)*(intLineaVer+1))-27),100*(intLineaHor)+20); //texto con método stroke

cnvTablaAtributo.fillText(arrayOpinion1[intFilaOpinion][intLineaVer],((150*intIdxAtributos)+((150/intMaxAtributo)*(intLineaVer+1)))-27,100*(intLineaHor)+20); //texto con método fill

}

if (intLineaHor!=0)

{

//Se escriben los títulos de las filas.

cnvTablaAtributo.fillStyle="blue";

cnvTablaAtributo.font="bold 18px arial";

cnvTablaAtributo.fillText(arrayTituloFila[intLineaHor-1],20,100*(intLineaHor)+60); //texto con método fill

}

cnvTablaAtributo.strokeStyle = "#00FF0F";

cnvTablaAtributo.stroke();

//Iteramos hasta alcanzar la cantidad total de atributos a evaluar.

for(intIdxAtributos=0; intIdxAtributos<=intMaxAtributo; intIdxAtributos++)

{

blnSalidaIntentos = false;

strPara = " ";

if (intIdxAtributos > 3)

{

intFilaOpinion = 2;

}

else if (intIdxAtributos > 0 && intIdxAtributos < 4)

{

intFilaOpinion = 1;

}

else if (intIdxAtributos < 1)

{

intFilaOpinion = 0;

strPara = " para ";

}

//Como somos muy bondadosos, permitimos al usuario hasta tres intentos, para equivocarse. Despues del tercer (3er) intento salimos del programa.

for(intCntIntentos=1; intCntIntentos<=intMaxIntentos; intCntIntentos++)

{

intOpinion = prompt("¿Qué opinas de " + strNombrePersona + ", acerca de que tan " + arrayCaracteristicas[intIdxAtributos] + " es: " + "\n 1 = " + arrayOpinion[intFilaOpinion][0] + ". \n 2 = " + arrayOpinion[intFilaOpinion][1] + ". \n 3 = " + arrayOpinion[intFilaOpinion][2] + ". \n 4 = " + arrayOpinion[intFilaOpinion][3] + ". \n 5 = " + arrayOpinion[intFilaOpinion][4] + ".", 5);

if (intOpinion != null)

{

if (intOpinion > 0 && intOpinion < 6)

{

intOpinion = intOpinion - 1;

alert("Tú opción elegida, para evaluar a " + strNombrePersona + " es: " + "\n " + arrayOpinion[intFilaOpinion][intOpinion] + strPara + arrayCaracteristicas[intIdxAtributos] + ".\n\nPresiona click, sobre el botón OK para continuar.");

intTotRst[intIdxAtributos] = intTotRst[intIdxAtributos] + intOpinion;

if (blnEsBog)

{

intTotBog[intIdxAtributos] = intTotBog[intIdxAtributos] + intOpinion;

}

intPuntos[intIdxAtributos][intOpinion]++;

dblPorcnt[intIdxAtributos][intOpinion] = (intPuntos[intIdxAtributos][intOpinion] / intPuntos[intIdxAtributos][intOpinion])*100;

break;

}

else

{

if (intCntIntentos < intMaxIntentos)

{

alert("Opción no válida. Escribiste " + intOpinion + ".\nRecuerda sólo están permitidos valores enteros entre el 1 y el 5.\n\nTe queda(n) " + (3-intCntIntentos) + " intento(s).");

}

else

{

alert("Tú eleción " + intOpinion + " no es válida" + "\nLamentablemente, consumiste todos tus intentos para contestar correctamente. \n\nDespidete del programa. Bye Bye.");

blnSalidaIntentos = true;

break;

}

else

{

intOpinion = -1

alert("Has seleccionado la opción CANCELAR. Para la evaluación del atributo " + arrayCaracteristicas[intIdxAtributos] + ". \nEsta evaluación no aporta puntos.\n\nPresiona click, sobre el botón OK para continuar.")

break;

}

if (blnSalidaIntentos) {break;}

intOpinion++;

//LLamada a las funciones que me permitirán dibujar caritas y llenar las filas de "Puntuación", "Porcentaje", "Sólo Bogotá" y "Total..."

fncTipoCaritas(intOpinion,arrayCaracteristicas[intIdxAtributos],cnvTablaAtributo);

}

fncLlenarFilas(cnvTablaAtributo);

}

else

{

alert("Diste click en CANCELAR. \n\nNos vemos en una próxima ocasión. Bye Bye.");

}

//NOTAS:

//*(1): Considero, bajo mi humilde punto de vista, que estoy haciendo un excesivo uso

// de líneas de comentarios. Pero en este ejemplo srcMiAporte.js, forma parte

// del aporte que quiero ofrecer.

//*(2): Si utilizamos este tipo de técnica, las IDE de los lenguajes de programación

// modernos nos permitirán encontrar, más rápidamente un nombre de variable.

// Si en nuestro código escribimos int, el editor del lenguaje de JavaScript nos

// mostrará sólo un listado de dieciocho (18) variables, en vez de mostrarnos

// cuarenta (40) variables definidas únicamente en el área de variables globales.

// Ahora, sólo imaginen si contamos todas las variables (globales y locales).

// Para uds. los chamos, esto sería muy “cool”.

// Estoy de acuerdo contigo, JavaSript es muy permisivo. Y, a una variable durante

// su ciclo de vida se le pueden asignar valores de diferentes tipos datos. Pero, si

// tratamos de estandarizar nuestro código, será más sencillo de comprenderlo y

// de modificarlo para futuros cambios.

//*(3): Las variables locales, al igual que las variables globales, poseen en común el

// atributo “ciclo de vida”, sólo qué, el ciclo de vida de las variables locales es menor

// al de las variables globales. El ciclo de vida de una variable local comienza en el

// momento que es declarada dicha variable dentro de una función y culmina al momento de

// finalizar la ejecución de la última instrucción en esa misma función.

// Parece un trabalenguas, pero el ciclo de vida, no es más que, el tiempo que dura

// en memoria una variable, sea esta local o global.

//*(4): El uso de una determinada instrucción, tiene su razón de ser. A que me refiero,

// bueno sencillo, existe una instrucción llamada SWITCH (en JavaScript es switch)

// esta instrucción no es utilizada para ser más “cool”, es para disminuir el número

// de líneas de código, para poder determinar todos los casos posibles (como si

// estuvieses haciendo uso de tablas de verdad) y programar muchas condiciones (mas de 3)

// en una única instrucción. Así como también, le permite al desarrollador poder

// determinar cuál es el bloque de instrucciones que se cumple con mayor frecuencia.

// Todo esto, era utilizado en la época de las cavernas de la programación para

// disminuir el tiempo de uso de la memoria y el tiempo de ejecución.

// En esta nueva era, eso no es problema para los “super procesadores” actuales,

// pero sigue siendo “una buena práctica”.

// Estoy de acuerdo, que para un curso básico no es necesario aprender a utilizarla,

// pero eso no quiere decir que dicha instrucción sea para “desarrolladores extremos”

// y mucho menos para gente “cool”.

//Como nota final, y es mi humilde opinión, en el mundo hay personas buenas y personas

//malas, pero considero que no hay personas totalmente buenas ni totalmente malas,

//cuando yo escucho en estos muy buenos videos, a Freddy (estimado instructor o

//facilitador) hablar de que los “profesores son malos”, “todos son pésimos”, este tipo

//de expresiones o calificativos me produce cierto desagrado, es el mismo desagrado

//que tú, estimado Freddy sientes cuando te dicen “deberías”.

//Yo no quiero escribirte “deberías”, pero si te aconsejo que “podrías”, evitar expresarte

//así de los profesionales o de cualquiera (haya culminado sus estudios universitarios o no).

//Quizás porque eres muy joven, con los años aprenderás (eso espero) a respetar a las personas

//que muchas otras consideran anormales o discapacitadas, me refiero, a las personas que

//padecen de autismo, les invito a observar los siguientes videos, para que se sorprendan

//de las grandes capacidades que poseen estos grandiosos seres humanos.

// http://www.dailymotion.com/video/x41dr7d?pxltrk=YWQtdXMtZWFzdC0xLnB4bGFkLmlv-aurl38jplmjg00c9emi0\_1-fd9daca330b1f47900a36f9a6fe571a6-57b8a322&syndication=lr%3A190709

// https://www.youtube.com/watch?v=wrVuEFCEmEc

// https://www.youtube.com/watch?v=BhZTM-aB0lw

//También “podrías”, si es tú deseo. Disminuir el uso de malas palabras, nuestro lenguaje

//es muy rico, mejor que el inglés o que cualquier otro idioma que yo conozca. Nuestro

//lenguaje nos permite expresar tantas cosas buenas que no es necesario utilizar palabras,

//tales como: WTF; Mal… Sea; La Ca… y con esto no quiero que me vean como puritano, yo también

//hago uso de malas palabras (somos humanos, tenemos sangre guerrera en las venas, somos latinos).

//A veces, son graciosas y nos hacen prestarle más atención al video, pero no en exceso, por favor.

//Estimado Freddy y equipo de Pletzi, este y muchos de sus videos, también los ven los niños(as).

//Y sí, ellos también aprenden y cuando sean adultos, de seguro van a utilizar malas palabras

//pero, prefiero que las utilicen cuando sean adultos y no en sus primeros años de aprendizaje

//de nuestro lenguaje (Castellano) y de un Lenguaje de Programación en particular (JavaScript).

//Gracias de antemano, sé que uds. lo van a lograr, porque “mejorando.la nos ama”.

//Ah, disculpen la descarga, lo siento, pero es necesario por el bien de nuestros hijos

//y por el bien de uds. equipo de Pletzi, para que cada día que pasa sean mejores.

//Otra cosita, que quería comentarles, respecto al uso de las malas palabras y con esto culmino,

//se los prometo. Cuando estamos vociferando con esa pasión que le ponemos a las cosas,

//generamos un ruido (hagan la búsqueda del concepto de la palabra: ruido) al receptor que

//es muy similar al que producen las cornetas (bocinas) de las motos y los automóviles grandes

//o pequeños, este ruido ocasiona la destrucción de unos pelitos (filamentos que nos permiten

//escuchar) microscópicos, haciendo que perdamos la audición. La vejez también ocasiona

//la pérdida de estos filamentos. Lamentablemente, estos filamentos se caen y no vuelven

//a crecer. Por ello, es que nuestros abuelos escuchan muy poco.

//En conclusión, no utilicemos tantas malas palabras, ni las cornetas de las motos o autos

//para evitar envejecer o quedarnos sordos tan prematuramente.

//Saludos desde Venezuela y mucho éxito a todos a nivel laboral, profesional y personal.

//César Chacón.

//P.D.: No quise explicar que hace “srcMiAporte.js”, espero que mis compañeros de clase

//lo descubran y comenten que les pareció. Deseo, que les sea de gran utilidad.

//En esta post data, quiero aprovechar para ofrecerles algunos "tips", a aquellas personas

//que sólo se dedican a destruir y no a construir. Me refiero a aquellos que ven un error

//y enseguida, comienzan a realizar críticas (destructivas), en vez de aportar algo positivo.

//Por ejemplo, en este programa hice algunas cosas que seguramente, van a generar comentarios

//como los que escribo a continuación:

// 1) "Ese dibujo de la carita feliz, no es de carita feliz. Es de carita sorprendida".

// 2) "Siempre sale 100%, en la fila de porcentaje".

// 3) "En vez de colocar Total..., escribe Resto del Mundo".

// 4) "La carita de molesto o a punto de explotar, no es así".

// 5) "Este programa, se puede hacer con menos líneas de código".

//Y puedo seguir enumerando frases tontas, que de seguro muchos las piensan y de seguro

//las van a escribir si no leen esta P.D.

//Y con esto no quiero dar a entender que no acepto críticas, si las acepto, pero considero

//que es más inteligente aportar críticas como los ejemplos que les muestro a continuación:

// 1) "Existe una página web, en el siguiente link:..., que tiene todos los tipos de caritas y sus descripciones".

// 2) "El Aporte desarrollado se puede mejorar, registrando en una BD o en un archivo o en PenDrive o en cualquier

// unidad de almacenamiento los datos de cada usuario".

// Pero, esto es para un curso avanzado o para más adelante en este curso, porque apenas

// he visto y escuchado los primeros 20 videos del Curso Básico de Programación.

// 3) "Revisando el código. Entendí que en vez de (Total...), ese título pudiera ser: Resto del Mundo u

// Otros lugares diferentes a Bogotá".

// 4) "Lo que dijeron en el item 1 es cierto y además para hacer la boca con el arco hacia abajo,

// puedes escribir la siguiente línea de código: ...".

// 5) "Este ejemplo está muy completo, se utilizan todas las herramientas que explicó nuestro profe Freddy Vega".

//Bueno, esas son algunos ejemplos de críticas constructivas. Espero les sirvan para futuros comentarios.

//Así que, utilicen las neuronas para crear y no para destruir. Inclusive, para este ejemplo (srcMiAporte), programé

//cosas de manera ineficiente con la finalidad de mostrar, que la lógica de un programador depende de su nivel

//de abstracción y algunas veces también depende del tiempo que tenga en entregar un proyecto. Y por sobre todas

//las cosas, en programación todo se puede hacer.

//Aunque, arriba lo informé, quiero recordarlo. Se usa la función "navigator", sólo para fines de validar

//el lugar dónde se encuentra el usuario y sólo con fines educativos. En este programa no se registran, guardan

//o almacenan datos de ningún tipo. El usuario tiene la potestad de permitir o no la activación de esta función.

//Ahora si me despido. Saludos a todos y que aprendan mucho. Nuevamente, muchas gracias a todo el equipo PLETZI.

Anyelina Moreno Robledo

student•

/**  
 * El area de dibujo se llama canvas nosotros dibujamos en el contexto que seria dentro del area de canvas  
 */  
function inicio() {  
  var cajatexto = document.getElementById("usuario");  
  var boton = document.getElementById("dibujalo");  
  var dibujo = document.getElementById("dibujo"); // etiqueta s html  
  
  
  var lienzo = dibujo.getContext("2d");  
  /**  
   * lienzo.getContext(contextType, contextAttributes);  
   * Metodo que retorna un contexto de dibujo dandonos la posibilidad de dibujar  
   *  ----> contextType = Elige el tipo de dibujo , puedes ser:  
   *    - "2d" - contexto de dos dimesiones  
   *  ----> contextAttributes = opciones de contexto  
   */  
  
  dibujarCirculo(lienzo); // Activamos las funcion dibujarCirculo  
  
  boton.addEventListener("click", function() {  
    dibujarGrilla(lienzo, cajatexto);  
  });  
  /**  
   * Añade un evento al objeto "boton"en este caso el evento click, mediante este  
   * evento activamos la funcion dibujarGrilla cuando el usuario pulse el boton:  
   *  
   * - Dibujar Grilla la pasamos como una funcion anonima , para que esta actue  
   *   con una variable con el valor de una funcion, y mediante esta pasarle los  
   *   parametros (lienzo y caja de texto) que necesitaremos para dibujar la grilla.  
  */  
}  
  
var dibujarGrilla = function(contexto,cajatexto) {  
  // contexto=lienzo  
  var rayas = Number(cajatexto.value); // Numero de rayas que queremos dibujar  
  var ancho = 500, alto = 500;         // Tamaño de nuestro Contexto  
  var linea, punto;  
  var anchoLinea = ancho / rayas;      // Ancho entre las lineas  
  var limiteX = ancho / anchoLinea;    // Cuantas lineas entran en el eje de las X  
  var limiteY = alto / anchoLinea;     // Cuantas lineas entran en el eje de las Y  
  
  for(linea = 0; (linea <= limiteX) && (linea <= limiteY) ; linea++) {  
  
    punto = (linea * anchoLinea) - 0.5; // Puntos donde iran colocadas las lineas  
  
    //se inicia un trazo color azul  
    contexto.beginPath();             // permite hacer un trazo nuevo  
    contexto.strokeStyle = "#1E5DEE"; // color azul  
    contexto.moveTo(punto, 0);        // desde aqui muevete  
    contexto.lineTo(0, punto );       // hasta aqui  
    contexto.stroke();                // dibujar  
    contexto.closePath();             // cerrar el camino  
  
    //Se inicia un nuevo trazo con las lineas color amarillo  
    contexto.beginPath();             // permite hacer un trazo nuevo  
    contexto.strokeStyle = "#ABC400"; // color amarillo  
    contexto.moveTo(punto, 500);  
    contexto.lineTo(500, punto);  
    contexto.stroke();  
    contexto.closePath();             // cerrar el camino  
  
    // Se inicia un nuevo trazo color rojo  
    contexto.beginPath();  
    contexto.strokeStyle = "#C4000E"; // rojo  
    contexto.moveTo(punto, 0);  
    contexto.lineTo(500, 500 - punto);  
    contexto.stroke();  
    contexto.closePath();  
  
    // se inicia un nuevo trazo color verde  
    contexto.beginPath();  
    contexto.strokeStyle = "#06F506"; //verde  
    contexto.moveTo(0, punto);  
    contexto.lineTo(500 - punto, 500);  
    contexto.stroke();  
    contexto.closePath();  
  }  
}  
  
var dibujarCirculo = function(lienzo) {  
  
  var botonCirculo = document.getElementById("circulo");  
  lienzo.beginPath(); // Comienza a dibujar  
  
  lienzo.strokeStyle = "#00F";  
  /**  
   * CanvasRenderingContext2D.strokeStyle -> propiedad de canvas para especificar el color a usar.  
   */  
  
  lienzo.arc(250,250,200, Math.PI*2, false);  
  /**  
   * void ctx.arc(x, y, radio, radianes , anticlockwise);a favor o encontra de las  
   * manecillas del reloj crea un arco  
   */  
  
  // Este evento se activa al pulsar el boton rellenar circulo:  
  botonCirculo.addEventListener("click", function() {  
    lienzo.arc(250,250,200, Math.PI*2, false);  
    lienzo.fillStyle = "#352727"; // color de relleno  
    lienzo.fill();  
  });  
  
  lienzo.stroke();                // dibujo  
  lienzo.closePath();             // cerrar el camino  
}

Byron

student•

Cordial saludo, quisiera agregar algo en el dibujo del circulo solamente, ya que googleando encontré un parámetro adicional para el dibujo de círculos que me parece importante especificar y es el ángulo de partida y el ángulo final. Ya que al intentar realizar el arco como yo lo quería no me funcionaba, y de paso jugar con el último parámetro de False o True.

//--------------------------DIBUJANDO UN CIRCULO------------------------------------  
      
    //Fórmula para convertir los grados en radianes  
    var anguloPartida= 0 * (Math.PI / 180); //grados X Math.PI / 180 ->es una constante  
    var anguloFinal =  360 * (Math.PI / 180);   
  
    lienzo.beginPath();//Permite hacer un trazo nuevo inclusive con otro color  
    lienzo.strokeStyle = "#00FF00";  
    lienzo.arc(150,150,//Punto del centro del círculo en X y Y(150,150),  
               100, //Radio  
                anguloPartida, //Ángulo de partida en radianes  
                anguloFinal, //Ángulo final en radianes"  
                false); /*por último, especificar si se está dibujando en el sentido de  
                          las manecillas del reloj.*/  
    lienzo.closePath();//Se utiliza para terminar el trazo  
    lienzo.stroke();//Para dibujar el trazo indicado  
    //--------------------------FINAL DEL CIRCULO-------------------------------------

Raúl Astete

student•

Les dejo esto con las diagonales, grilla y el rellenado para que lo usen como base. Modifiquen y creen lo que deseen :D (JAVA SCRIPT)  
  
  
var lienzo, canvas, texto, boton1, boton2, rellenado; //variables universales para que todas las funciones las utilicen  
  
function inicio()  //dentro iran todas las funciones de los dibujos    
{  
    canvas = document.getElementById("dibujo");  //almaceno el canvas  
    lienzo = canvas.getContext("2d");    //almaceno el contexto y ahora si a dibujar  
    texto = document.getElementById("usuario");  
    boton1 = document.getElementById("boton1");  
    boton2 = document.getElementById("boton2");  
    rellenado = document.getElementById("rellenar");  
  
      
    boton1.addEventListener("click", diagonales);  
    boton2.addEventListener("click", dibujarGrilla);  
    rellenado.addEventListener("click",dibujarCirculo);  
  
    marco();  
      
      
  
}  
  
function marco(){  
  
    lienzo.beginPath();  
  
    lienzo.strokeStyle = "#00AAB0"; //color de la linea  
  
    lienzo.moveTo(1,1); //limite del canvas  
    lienzo.lineTo(299,1);  
    lienzo.lineTo(299,299);  
    lienzo.lineTo(1,299);  
    lienzo.lineTo(1,1);  
    lienzo.stroke();  
    lienzo.closePath();  
}  
  
function diagonales() {  
  
    var rayitas = Number(texto.value);  
      
    var i;  
    lienzo.strokeStyle = "#e7f924";  
      
    for ( i = 0; i <= 2*rayitas; i ++) {  
        lienzo.beginPath();  
        lienzo.moveTo( 0 , i*(300/rayitas));  
        lienzo.lineTo(i*(300/rayitas),0);  
        lienzo.stroke();  
        lienzo.closePath();   
  
  
    }  
  
    var j;  
  
    for ( j = 0; j <= 2*rayitas; j++) {  
      
        lienzo.beginPath();  
        lienzo.moveTo( 300 - ((300/rayitas) * j), 0 );  
        lienzo.lineTo( 300 , (300/rayitas) * j);  
        lienzo.stroke();  
        lienzo.closePath();  
  
    }  
  
  
}  
function dibujarGrilla() {  
  
      
        var rayas = Number(texto.value);  
        var lineavertical;  
  
        for(lineavertical=0; lineavertical <=rayas; lineavertical++){  
  
            lienzo.beginPath();  
            lienzo.strokeStyle="#AAA";  
            lienzo.moveTo(lineavertical*(300/rayas), 0);  
            lienzo.lineTo(lineavertical*(300/rayas), 300);  
            lienzo.stroke();  
            lienzo.closePath();  
        }  
  
        var lineahorizontal;  
  
        for(lineahorizontal=0; lineahorizontal <=rayas; lineahorizontal++){  
  
            lienzo.beginPath();  
            lienzo.strokeStyle = "#AAA";  
            lienzo.moveTo(0, lineahorizontal*(300/rayas));  
            lienzo.lineTo(300, lineahorizontal*(300/rayas));  
            lienzo.stroke();  
            lienzo.closePath();  
        }  
  
}  
  
function dibujarCirculo(){  
  
    lienzo.beginPath();  //iniciar un nuevo trazo con otro color  
    lienzo.strokeStyle = "#24f929";  
    lienzo.arc(150,150,100,2*Math.PI, false); //Xcentro,Ycentro,radio, angulo en radianes, sentido horario o antihorario  
    lienzo.closePath();  
    lienzo.stroke();  
    lienzo.closePath();  
    lienzo.fillStyle = "#24f929";  
    lienzo.fill();  
  
}

Raúl Astete

student•

Les dejo esto con las diagonales, grilla y el rellenado para que lo usen como base. Modifiquen y creen lo que deseen :D   
  
<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8" />  
    <title>Dibujos geométricos</title>  
    <script type="text/javascript" src="canvas.js"></script>  
</head>  
<body>  
<p>  
    <input type="text" id="usuario"></input>  
    <input type="button" id="boton1" value="Dibuja diagonales"></input>  
    <input type="button" id="boton2" value="Dibuja grilla"></input>  
    <input type="button" id="rellenar" value="Rellenalo"></input>  
  
</p>  
<canvas width="300" height="300" id="dibujo"></canvas>  
<script type="text/javascript">  
    inicio();  
</script>  
</body>  
</html>

wr4pp3r

student•

Hola a tod@s. Buen día.

Así me quedo mi ejercicio se los comparto XD

Y ahora el código, gracias por leer!!

HTML

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf8">  
    <title>Dibujo Básico con Canvas</title>  
    <script type="text/javascript" src="canvas.js"></script>  
</head>  
<body>  
    <canvas width="320" height="280" id="dibujo"></canvas>  
    <table border="1px">  
        <tr>  
                <td>Ingrese la cantidad de lineas</td>  
                <td>Seleccione la opción deseada</td>  
        </tr>  
        <tr>  
                <td><input id="cantidadLineas" size="40" type="text" value="" placeholder="Digite cuántas lineas desee"/></td>  
                <td><div>  
                    <input id="grilla" type="button" value="Mostrar Grilla" />  
                    <input id="diagonal" type="button" value="Mostrar Diagonales" />  
                    <input id="prueba" type="button" value="Mostrar Prueba" />  
                </div></td>  
        </tr>  
    </table>  
  
    <div id="alertas"></div>  
    <script type="text/javascript">  
        inicio();  
    </script>  
</body>  
</html>

//Quiero una linea por cada 7px en cada eje  
var linea, ancho=320, alto=280, punto=0;  
var medidalinea, limiteX, limiteY;  
var a, b, c, d, z, areaDibujo;  
var radioCg = 50;  
  
function inicio() {  
    z = document.getElementById("cantidadLineas");  
    a = document.getElementById("prueba");  
    b = document.getElementById("grilla")  
    c = document.getElementById("dibujo");  
    d = document.getElementById("diagonal");  
  
    //alert("X es: " + limiteX + " y Y es: " + limiteY);  
    a.addEventListener('click', Prueba);  
    b.addEventListener('click',Grilla);  
    d.addEventListener('click',Diagonales);  
    areaDibujo = c.getContext("2d");  
    areaDibujo.strokeStyle = "#FDD";  
}  
  
function Grilla() {  
    cantLineas = Number(z.value);  
    medidalinea = ancho / cantLineas;  
    limiteX = ancho / medidalinea;  
    limiteY = alto / medidalinea;  
    areaDibujo.clearRect(0, 0, 320, 280);  
    //alert(medidalinea);  
    for (var i = 0; i <= limiteX; i++) {  
        areaDibujo.beginPath();  
        areaDibujo.moveTo(i * medidalinea,0);  
        areaDibujo.lineTo(i * medidalinea,alto);  
        areaDibujo.closePath();  
        areaDibujo.stroke();  
    }  
  
    for (var i = 0; i <= limiteY; i++) {  
        areaDibujo.beginPath();  
        areaDibujo.moveTo(0,i * medidalinea);  
        areaDibujo.lineTo(ancho,i * medidalinea);  
        areaDibujo.closePath();  
        areaDibujo.stroke();  
    }  
}  
  
function Diagonales() {  
    areaDibujo.clearRect(0, 0, 320, 280);  
    //Este ciclo dibija las lineas diagonales  
    for (var i = 0; i <= ancho; i++) {  
        areaDibujo.beginPath();  
        //areaDibujo.moveTo(0,i * medidalinea);  
        //areaDibujo.lineTo(ancho,i * medidalinea);  
        areaDibujo.moveTo(i*medidalinea,0);  
        areaDibujo.lineTo(medidalinea / (i * medidalinea),i*medidalinea);  
        areaDibujo.closePath();  
        areaDibujo.stroke();  
    }  
  
    areaDibujo.beginPath();  
    areaDibujo.arc(150,150,50,(0*Math.PI),(2*Math.PI),false);  
    areaDibujo.fillStyle="#b3d9ff";  
    areaDibujo.closePath();  
    areaDibujo.fill();  
    areaDibujo.stroke();  
  
  
    //a.innerHTML = "Prueba de Dibujo";  
}  
  
function Prueba() {  
    areaDibujo.clearRect(0, 0, 320, 280);  
    var f = ancho / (radioCg*2);  
    //Esta porcion dibuja el come galletas XD  
    for (var i = 1; i < f; i++) {  
        areaDibujo.beginPath();  
        areaDibujo.moveTo(radioCg*(2*i),radioCg);  
        areaDibujo.arc(radioCg*(2*i),radioCg,radioCg,(0.1*Math.PI),(1.9*Math.PI),false);  
        areaDibujo.fillStyle="#b3d9ff";  
        areaDibujo.closePath();  
        areaDibujo.fill();  
        areaDibujo.stroke();  
    }  
}

Saludos...

Alexander Caicedo

student•

Poner color a la figura
canvas.fillStyle = "#00FF00"; //le doy color a la figura
canvas.beginPath();
canvas.strokeStyle = "#00F";
canvas.arc(150,150, 100, (Math.PI*2) , false);
canvas.fill();
canvas.closePath();
canvas.stroke();

Denis Morales

student•

una solución sencilla, incluyendo una forma de limpiar el canvas:

<!-- html-->  
<!DOCTYPE html>  
<html>  
<head>  
    <meta charset = "utf-8">  
    <title>Dibujando con eventos</title>  
    <script type="text/javascript" src = "tarea2.js">  
    </script>  
</head>  
<body>  
    <h1>DIBUJANDO CON EVENTOS</h1>  
    <p>  
        <input type="text" id="ingresar"></input>  
        <input type="button" id="boton" value="Ingresa numero de líneas"></input>  
    </p>  
    <div>  
        <canvas id="dibujo" height = 300 width = 300></canvas>  
    </div>  
    <script type="text/javascript">  
    inicio();  
    </script>  
</body>  
</html>  
  
/*js*/  
var canvasLineas,txtIngreso,btnLineas,numeroDeLineas;  
  
function inicio()  
{  
    canvasLineas = document.getElementById("dibujo").getContext("2d");  
    txtIngreso = document.getElementById("ingresar");  
    btnLineas = document.getElementById("boton");  
    btnLineas.addEventListener("click",trazarLineas);  
}  
  
function trazarLineas()  
{  
    document.getElementById("dibujo").width = document.getElementById("dibujo").width  
    numeroDeLineas = Number(txtIngreso.value);  
    var espacioEntreLineas = Number(document.getElementById("dibujo").width)/(numeroDeLineas-1);  
    canvasLineas.strokeStyle = "#FF0000";  
    canvasLineas.beginPath();  
    for(var i=0; i<=numeroDeLineas; i++){  
        canvasLineas.moveTo(i*espacioEntreLineas,0);  
        canvasLineas.lineTo(i*espacioEntreLineas,300);  
        canvasLineas.moveTo(0,i*espacioEntreLineas);  
        canvasLineas.lineTo(300,i*espacioEntreLineas);      
    }  
    canvasLineas.closePath();  
    canvasLineas.stroke();  
}

Rod

student•

En la función trazarLineas() podrías simplificar la variable del ancho del canvas.

 widthCanvas = document.getElementById("dibujo").width;  
 numeroDeLineas = Number(txtIngreso.value);  
 var espacioEntreLineas = Number(widthCanvas/(numeroDeLineas-1));

Jordi Ollé Ballesté

student•

Mi pregunta es:

¿Como se podría hacer para que la rejilla se actualice automáticamente (sin tener que hacer un refresh) cada vez que le damos un numero diferente de rayas?

juanoliva

student•

Buenas, dejo mi versión de la tarea con lineas diagonales y circulo relleno :D

var dibujo, lienzo, t, b;
function inicio()
{
t = document.getElementById("usuario");
b = document.getElementById("dibujalo");
dibujo = document.getElementById("dibujito");
lienzo = dibujo.getContext("2d");

b.addEventListener("click", dibujarGrilla);

lienzo.beginPath();
lienzo.strokeStyle = "#00F";
lienzo.arc(150,150,100, (Math.PI * 2), false);
lienzo.closePath();
lienzo.fillStyle = "blue";
lienzo.lineWidth = 1;
lienzo.fill();
lienzo.stroke();

}
function dibujarGrilla ()
{
var pony = lienzo;
var rayas = (Number(t.value)) / 2;
var ancho = 300, alto = 300;
var linea, punto;
var anchoLinea = ancho / rayas;
var limiteX = (ancho / anchoLinea) / 2;
var limiteY = (alto / anchoLinea) / 2;

pony.strokeStyle = "#AAA";

for(linea = 0; linea <= limiteX; linea++)
{
punto = (linea * anchoLinea) - 0.5;
pony.beginPath();
pony.strokeStyle = "#AAA";
pony.moveTo(0.5, punto);
pony.lineTo(ancho - punto, ancho);
pony.moveTo(punto, 0.5);
pony.lineTo(ancho, ancho - punto);
//pony.moveTo(punto, 0.5);
//pony.lineTo(punto, ancho-0.5);
pony.stroke();
pony.closePath();
}
for(linea = 0; linea <= limiteY; linea++)
{
punto = (linea * anchoLinea) - 0.5;
pony.beginPath();
pony.strokeStyle = "#AAA";
pony.moveTo(ancho, punto);
pony.lineTo(punto, ancho);
pony.moveTo(ancho - punto, 0.5);
pony.lineTo(0.5, ancho - punto);
//pony.moveTo(0.5, punto);
//pony.lineTo(alto - 0.5, punto);
pony.stroke();
pony.closePath();
}

}

juan camacho

student•

habia manejado mal el elemento fillstyle, gracias!

Alejandro Moreno

student•

var canvas, lienzo;  
function inicio() {  
    canvas = document.getElementById("dibujo");  
    lienzo = canvas.getContext("2d");  
    drawCanvas(lienzo);  
    drawCircle(lienzo);  
    drawGrid(lienzo);  
}  
function drawCanvas(lienzo) {  
    lienzo.beginPath();  
    lienzo.strokeStyle = "#FFFF00"  
    lienzo.moveTo(1, 1);  
    lienzo.lineTo(299, 1);  
    lienzo.lineTo(299, 299);  
    lienzo.lineTo(1, 299);  
    lienzo.lineTo(1, 1);  
    lienzo.stroke();  
    lienzo.closePath();  
}  
function drawCircle(canvas) {  
    lienzo.beginPath();  
    lienzo.strokeStyle = "#05CD39";  
    lienzo.arc(150, 150, 120, Math.PI * 2, false);  
    lienzo.stroke();  
    lienzo.closePath();  
}  
function drawGrid(lienzo) {  
    lienzo.beginPath();  
    lienzo.strokeStyle = "#07090E";  
    for (var index = 15; index <= 300 * 2; index = index + 15) {  
        lienzo.moveTo(index, 300);  
        lienzo.lineTo(0, 300 - index);  
        lienzo.moveTo(0, index);  
        lienzo.lineTo(index, 0);  
    }  
    lienzo.stroke();  
    lienzo.closePath();  
}

Jhon Alexander Castillo Forero

student•

como el lienzo es una variable global, no es necesario que la ingreses como parámetro en cada uno de las funciones

Sara Monroy

student•

es necesario poner el DOCTYPE?

Erik Elyager

student•

Sí el DOCTYPE es necesario siempre que estamos maquetando un sitio web. Por cierto, tenemos un curso básico de programación más actualizado, te recomiendo tomes ese en lugar de este.

Sara Monroy

student•

ok gracias prefiero seguir con este aunque el otro sea mejor seguire este hasta cuando lo termine pero igualmente gracias ;)

Carlos Ramos Vásquez

student•

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Tarea de Carlos Junior</title> <script type="text/javascript"> var dibujo, l function inicio() {

dibujo = document.getElementById("dibujito");
l = dibujo.getContext("2d");

var ancho = 300, alto = 300;
var anchoLinea = 10;
var rayas = ancho / anchoLinea;

for ( lineas = 0; lineas <= rayas; lineas++)
{
l.strokeStyle = "#000";
l.moveTo( lineas * anchoLinea, 0 );
l.lineTo( 300, ancho - (lineas * anchoLinea) )
l.moveTo( 0, lineas * anchoLinea );
l.lineTo( ancho - (lineas * anchoLinea), 300 );
l.stroke();
}

for ( lineas = 0; lineas <= rayas; lineas++)
{
l.strokeStyle = "#000";
l.moveTo( lineas * anchoLinea, 0 );
l.lineTo( 0, lineas * anchoLinea )
l.moveTo( 300, lineas * anchoLinea );
l.lineTo( lineas * anchoLinea, 300 );
l.stroke();
}

}
</script>
</head>
<body>
<canvas width="300px" height="300px" id="dibujito"></canvas>
<h2>Dibujando con canvas JuniOr¬</h2>
<script type="text/javascript">
inicio();
</script>
</body>

</html>

Alfredo González Guerrero

student•

Excelente curso. Dejo mi tarea.

-Html

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8" />

	<title>Canvas</title>

	<script type="text/javascript" src="canvas.js"></script>

</head>

<body>

<p>

		<input type="text" id="usuario" />

		<input type="button" id="boton" value="Tocame" />

	</p>

	<canvas width="300" height="300" id="dibujito"></canvas>

	<h2>Dibujando con canvas</h2>

	<script type="text/javascript">

		inicio();

	</script>

</body>

</html>

-javascript

var dibujo, lienzo;

//Funcion principal que carga los valores del canvas y dibuja un circulo dentro del mismo

function inicio() {

	t = document.getElementById("usuario");

	b = document.getElementById("boton");

	dibujo = document.getElementById("dibujito");

	lienzo = dibujo.getContext("2d");

	crearMalla(lienzo);

	b.addEventListener("click",dibujarGrilla);

	lienzo.beginPath();

	lienzo.strokeStyle = "#00F";

	lienzo.arc(150,150,100,Math.PI*2,false);

	lienzo.closePath();

	lienzo.stroke();

	//ciclo que permite darle color a toda el area del circulo

	/*for(var radio = 0; radio <= 100; radio++) {

		lienzo.beginPath();

		lienzo.strokeStyle = "#00F";

		lienzo.arc(150,150,radio,Math.PI*2,false);

		lienzo.closePath();

		lienzo.stroke();

}*/

//Funcion que dibuja lineas en el canvas, usando como parametro

//el valor que ingresa el usuario.

function dibujarGrilla() {

	var l = lienzo;

	var ancho=300, alto=300;

	var rayas = Number(t.value);

	var lineas;

	var anchoLinea = ancho/rayas;

	var limiteX = ancho / anchoLinea;

	var limiteY = alto / anchoLinea;

	l.strokeStyle = "#AAA";

	for (var lineas = 0; lineas <= limiteX; lineas++) {

		l.beginPath();

		l.moveTo((lineas*anchoLinea),0);

		l.lineTo((lineas*anchoLinea),300);

		l.closePath();

		l.stroke();

	for (var lineas = 0; lineas <= limiteY; lineas++) {

		l.beginPath();

		l.moveTo(0,(lineas*anchoLinea));

		l.lineTo(300,(lineas*anchoLinea));

		l.closePath();

		l.stroke();

//Funcion que crea las lineas en diagonal

function crearMalla(l) {

	l = lienzo;

	var ancho=300, alto=300;

	var lineas;

	l.strokeStyle = "#FF0000";

	for(lineas = 0; lineas <= 30; lineas++) {

		l.beginPath();

		l.moveTo((lineas*10),0);

		l.lineTo(0,(lineas*10));

		l.closePath();

		l.stroke();

	for(lineas = 0; lineas <= 30; lineas++) {

		l.beginPath();

		l.moveTo(300,(lineas*10));

		l.lineTo((lineas*10),300);

		l.closePath();

		l.stroke();

	for(lineas = 0; lineas <= 30; lineas++) {

		l.beginPath();

		l.moveTo((lineas*10),0);

		l.lineTo(300,300-(lineas*10));

		l.closePath();

		l.stroke();

	for(lineas = 0; lineas <= 30; lineas++) {

		l.beginPath();

		l.moveTo(0,(lineas*10));

		l.lineTo(300-(lineas*10),300);

		l.closePath();

		l.stroke();

Carlos Andrés Millan Satizabal

student•

Esta es otra solución para dibujar las rayas que ingresa el usuario, no importa el tamaño del lienzo:

function dibujarGrilla() {  
    var ancho=300, alto = 100;  
    var rayas = Number(texto.value);  
    var linea, punto;  
    var anchoLinea = ancho / rayas;  
    var altoLinea = alto / rayas  
    var limiteX = ancho / anchoLinea;  
    var limiteY = alto /altoLinea;  
    l = lienzo;  
  
    l.strokeStyle = "AAA";  
  
    for(linea=0; linea <= limiteX; linea++){  
        punto = linea * anchoLinea;  
        l.beginPath();  
        l.moveTo(punto, 0);  
        l.lineTo(punto, alto);  
        l.closePath();  
        l.stroke();  
  
    }  
  
    for(linea=0; linea <= limiteY; linea++){  
        punto = linea * altoLinea;  
        l.beginPath();  
        l.moveTo(0, punto);  
        l.lineTo(ancho, punto);  
        l.closePath();  
        l.stroke();  
  
    }

Juan

student•

en mi navegador no me sale la el lienzo para dibujar ¿saben por qué es esto ?

Juan

student•

ya lo arregle =)

Deivid Rojas

student•

cada ves el curso es mejor y mas interesante, me divierto mucho programando, un abrazo a todos los que aprendemos cada ves mas con practica y esfuerzo.

Dibujar con eventos

Bienvenido

Aprender a programar es fácil

La Web con Visión Profesional

Aprende sobre Algoritmos

Condicionales y operadores en programación

Qué lenguaje de programación aprender primero

Material del curso / Archivos del curso

Introducción básica a HTML y Javascript para programar

Uso del sistema de vídeo y notas

Lenguajes y compiladores

HTML y Javascript

Variables y funciones

Piedra, papel y tijera con Javascript

Variables, Matrices y Objetos en Javascript

Escribir HTML desde JS (document.write)

Matrices

Juego campo minado

Objetos del navegador

Objetos en JS

Preguntas

Ciclos y Dibujos con Canvas

Ciclos

Dibujos con canvas

Dibujar con eventos

Preguntas y respuestas

Programando juegos con canvas

Tipos de imágenes

Insertar imágenes en canvas

Dibujo de múltiples imágenes en canvas

Dibujar al enemigo y controlar a Diana

Sesión de preguntas y respuestas

Uso de Objetos, Prototype y juego de ahorcado en Canvas

Objetos en JavaScript con Prototype

Creando el juego del Ahorcado

Dibujo de un ahorcado usando Canvas

Sesión de preguntas y respuestas

Cómo crear un algoritmo para el juego del ahorcado

Extendiendo la funcionalidad de los Strings

Creando nuestro algoritmo para el juego del ahorcado

Sesión de preguntas y respuestas

Pregúntale a Freddy lo que quieras ... acerca de programación ;)

Todo lo que siempre quisiste saber sobre este curso y no te atrevías a preguntar - Parte 1

Todo lo que siempre quisiste saber sobre este curso y no te atrevías a preguntar - Parte 2

Conceptos básicos de programación: Frontend-Backend

¿Qué es Frontend y Backend?

Ejemplo de un login usando POST y GET

Ejemplo de un login usando AJAX

Sesión de preguntas y respuestas

Crea tu primer servidor web con Node.JS

Instalación de Node.js

Instalación de librerías de Node con npm

Modelo cliente servidor y seguridad web básica

Servidor web con Express y Node.js

Formulario de login con Node.js

Sesión de preguntas y respuestas

Aprende a volar un dron con Javascript

Introducción a los drones

Bases de Node.js para drones

Vuela un dron con Node.js

Sesión de preguntas y respuestas

Complementos del curso

Publica tu sitio web usando GitHub Pages