Dibujos con canvas

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

Contenido del curso

Bienvenido

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

Variables, Matrices y Objetos en Javascript

Ciclos y Dibujos con Canvas

Programando juegos con canvas

Uso de Objetos, Prototype y juego de ahorcado en Canvas

Cómo crear un algoritmo para el juego del ahorcado

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

34
Todo lo que siempre quisiste saber sobre este curso y no te atrevías a preguntar - Parte 1
32:25 min
35
Todo lo que siempre quisiste saber sobre este curso y no te atrevías a preguntar - Parte 2
56:14 min

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

Crea tu primer servidor web con Node.JS

Aprende a volar un dron con Javascript

Complementos del curso

50
Publica tu sitio web usando GitHub Pages
01:41 min

Tomar examen

Comentarios

Kiara Katrina

student•

Dejo este enlace de mozilla developers donde indican más a fondo todo lo que es canvas, está muy buena la información.

David Antonio Ordóñez Cornejo

student•

Gracias!

Carlos Carrero

student•

Gracias excelente!!!

Jaime Méndez

student•

Un canvas debe entenderse como el lienzo de un pintor

David Antonio Ordóñez Cornejo

student•

Buen aporte.

Erick Orlando Velasco Martínez

student•

Clarísimo, sólo traduces del inglés y .... es lienzo!!! :)

Karenn Yeraldin Hernández Duarte

student•

Para poner una imagen en el canvas: (Hay que guardar una foto con nombre foto.png en la carpeta canvas)

    var fotico = new Image();  
    fotico.src = "foto.png";   
    fotico.onload = function(){  
         lienzo.drawImage(fotico,10,10);  
    }

John Rios

student•

Se llama RGB Hexadecimal por sus siglas en ingles (Red, Green, Blue Hexadecimal)

Esto se basa en la idea de que todos los colores se pueden conseguir mezclando rojo, verde y azul. y cada uno de los tres colores puede tomar valores de 0 a 255 (256 (en decimal) valores posibles), o 00 aFF (en hexadecimal).

Es decir que hay 256×256×256 = 2563 = 16,777,216 combinaciones posibles de colores (y por eso verás que los ordenadores dicen que pueden mostrar "16 millones de colores")

El formato o ("notación") que se usa en páginas web es #RRGGBB, donde RR es el valor de la componente roja (usando dos dígitos hexadecimales), GG la componente verde y BB la azul.

Ejemplo:

Rojo (255, 0, 0) #FF0000
Verde   (0, 255, 0) #00FF00
Azul (0, 0, 255)   #0000FF
Negro   (0, 0, 0)   #000000
Blanco (255, 255, 255)   #FFFFFF

Juan Gómez

student•

Comparto mi trabajo manejando canvas con ciclos.

var image, lines;  
function init(){  
    image = document.getElementById("lines");  
    lines = image.getContext("2d");  
    draw(lines);  
    lines.beginPath();      
    lines.styleStroke = "#ccc";  
    lines.arc(200, 200, 150, (Math.PI * 2), false);  
    lines.closePath();      
    lines.stroke();  
}  
  
  
function draw(l){  
    var i;  
    var width = 400;  
    var height = 400;  
    var space = width / 20;   
    var limitX = 400;  
    var limitY = 0;   
    for (i=0; i<space; i++){  
        l.beginPath();  
        l.moveTo(0, 0);  
        l.lineTo(limitX, limitY);  
        limitX -=space;  
        limitY +=space;                      
        l.closePath();  
        l.stroke();  
    }  
      
    var limitX = 0;  
    var limitY = 0;   
    for (i=0; i<=space; i++){  
        l.beginPath();  
        l.moveTo(0,400);  
        l.lineTo(limitX, limitY);  
        l.closePath();  
        l.stroke();  
        limitX += space;  
        limitY += space;          
          
    }  
      
    var limitX = 0;  
    var limitY = 0;   
    for (i=0; i<space; i++){  
        l.beginPath();  
        l.moveTo(400,0);  
        l.lineTo(limitX, limitY);  
        l.closePath();  
        l.stroke();  
        limitX += space;  
        limitY += space;  
    }  
      
    var limitX = 400;  
    var limitY = 0;   
    for (i=0; i<=space; i++){  
        l.beginPath();  
        l.moveTo(400,400);  
        l.lineTo(limitX, limitY);  
        l.closePath();  
        l.stroke();  
        limitX -= space;  
        limitY += space;  
    }  
      
      
}

Este fue el resultado:

Hector Taboada

student•

Los videos de este curso funcionan mejor en Firefox, porque carga el video en la memoria y podes ir al minuto que quieras sin problemas.

Además, si tenes una conexión lenta (así como yo), le das pausa y esperas que cargue.

Antes usaba el Chrome y me complicaba mucho mi internet tercermundista... jajaja

Espero les sirva de algo el dato.

mspcraphic

student•

Dios amigo te quiero por fin voy ver los videos sin que se pegue a cada momento :)

Samuel Hernandez Ramirez Hernandez Ramirez

student•

<!DOCTYPE html>

<html> <head> <meta charset="utf-8"> <title>Dibujando con freddy</title> <script type="text/javascript" src="canvas.js"></script> </head> <body> <h1>Dibujando</h1> <canvas width="300" height="300" id="dibujo"></canvas> <script type="text/javascript"> inicio(); </script> </body> ``` ```

</html>

javaScript

var dibujo, lienzo;  
function inicio(){  
    dibujo = document.getElementById("dibujo");  
    lienzo = dibujo.getContext("2d");  
    grilla(lienzo);  
      
    lienzo.beginPath();  
    lienzo.strokeStyle = "#00F";  
    lienzo.arc(150,150,100,(Math.PI*2), false);  
    lienzo.closePath();  
    lienzo.stroke();  
}  
function grilla(l) {  
    var linea=0,lineas=5,anchoLinea=5;  
    var ancho=300, alto=300;  
      
    var punto;  
    for(linea = 0;linea<=lineas;linea++){  
        punto = linea*anchoLinea;  
        l.beginPath();  
        l.strokeStyle="#00FF00";  
        l.moveTo(punto,0);  
        l.lineTo(ancho,alto-punto);  
        l.stroke();  
        l.closePath();  
    }  
    for(linea = 0;linea<=lineas;linea++){  
        punto = linea*anchoLinea;  
        l.beginPath();  
        l.strokeStyle="#00FF00";  
        l.moveTo(0,punto);  
        l.lineTo(ancho-punto,alto);  
        l.stroke();  
        l.closePath();  
    }  
    for(linea = 0;linea<=lineas;linea++){  
        punto = linea*anchoLinea;  
        l.beginPath();  
        l.strokeStyle="#00FF00";  
        l.moveTo(ancho,punto);  
        l.lineTo(punto,alto);  
        l.stroke();  
        l.closePath();  
    }  
    for(linea = 0;linea<=lineas;linea++){  
        punto = linea*anchoLinea;  
        l.beginPath();  
        l.strokeStyle="#00FF00";  
        l.moveTo(ancho-punto,0);  
        l.lineTo(0,alto-punto);  
        l.stroke();  
        l.closePath();  
    }  
}

Luis Romero

student•

Minuto 32 el video:

Imposible lo que explicas, dibujas el 3 radian en la mitad de la tercera parte de la circunferencia, pero luego dices que 3.14159 radianes son dos partes de la circunferencia, eso no cuadra en ningún lado.

Ayoze Marcelino Rodriguez

student•

Pense lo mismo, el tercer radian debe quedar dibujado antes de los 180º por lógica, si no, es imposible que valga 3,14. El dibujo correcto es:

Buena clase igualmente!! Gracias.

Juan Carlos Espinoza Zurita

student•

Esta es mi tarea de canvas para hacer las lineas diagonales, hice una función para hacer las lineas diagonales, otra para hacer la grilla y otra para dibujar circunferencias.
Cada función tiene como parámetros las medidas del canvas (height y width) y la cantidad de lineas que se obtiene del campo de texto.
Cada botón ejecuta una de las funciones mencionadas anteriormente.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Dibujando</title> <script type="text/javascript" src="js/canvas.js"></script> </head> <body> <h2>Dibujando con canvas</h2> <canvas width="300" height="300" id="dibujo"></canvas> <p>Seleccione cantidad de lineas para el gráfico</p> <input type="text" id="lineas"/> <p>Seleccione gráfico</p> <input type="button" id="grilla" value="Grilla"/> <input type="button" id="diagonal" value="Diagonal"/> <input type="button" id="circulos" value="Circulos"/> <input type="button" id="clear" value="Limpiar canvas"/> <script type="text/javascript">inicio();</script> </body>

var dibujo;  
var canvas;  
var grilla, diagonal, circulos, clear;  
var numero, n;  
function dibujarGrilla(canvas,width,height)  
{  
    numero = document.getElementById("lineas");  
    var lineas = Number(numero.value);  
    var linea;  
    for (linea = 0; linea <= lineas; linea++)  
    {  
        var ancho = width/lineas  
        var largo = height/lineas  
        canvas.beginPath();  
        canvas.strokeStyle = "#AAA";  
        canvas.moveTo(ancho * linea , 0);  
        canvas.lineTo(ancho * linea , height);  
        canvas.stroke();  
        canvas.closePath();  
        canvas.beginPath();  
        canvas.strokeStyle = "#AAA";  
        canvas.moveTo(0 , largo * linea);  
        canvas.lineTo(width , largo * linea);  
        canvas.stroke();  
    }  
}  
function dibujarDiagonal(canvas,width,height)  
{  
    numero = document.getElementById("lineas");  
    var lineas = Number(numero.value);  
    var linea;  
    for (linea = 0; linea <= lineas; linea++)  
    {  
        var ancho = width/lineas  
        var largo = height/lineas  
        canvas.beginPath();  
        canvas.strokeStyle = "#AAA";  
        canvas.moveTo(ancho * linea * 2 , 300);  
        canvas.lineTo(0 , height - ancho * linea * 2);  
        canvas.stroke();  
        canvas.closePath();  
        canvas.beginPath();  
        canvas.strokeStyle = "#AAA";  
        canvas.moveTo(0 , largo * linea * 2);  
        canvas.lineTo(largo * linea * 2 , 0);  
        canvas.stroke();  
    }  
}  
function dibujarCirculos(canvas,width,height)  
{  
    numero = document.getElementById("lineas");  
    var cantidad = Number(numero.value);  
    var linea;  
    for (linea = 0; linea <= cantidad; linea++)  
    {  
        var ancho = width/cantidad  
        var largo = height/cantidad  
        canvas.beginPath();  
        context.strokeStyle = "#00f";  
        context.arc(width/2,height/2,linea*ancho/2,Math.PI*2,false);  
        context.closePath();  
        context.stroke();  
    }  
}  
function limpiar(canvas, iniciox, inicioy, width, height)  
{  
    canvas.clearRect(iniciox, inicioy, width, height);  
}  
function inicio()  
{  
    grilla = document.getElementById("grilla");  
    diagonal = document.getElementById("diagonal");  
    circulos = document.getElementById("circulos");  
    dibujo = document.getElementById("dibujo");  
    clear = document.getElementById("clear");  
    context = dibujo.getContext("2d");  
    var height = context.canvas.height;  
    var width = context.canvas.width;  
    grilla.addEventListener("click", function(){  
        dibujarGrilla(context,height,width);  
        }, false);  
    diagonal.addEventListener("click", function(){  
        dibujarDiagonal(context,height,width);  
        }, false);  
    circulos.addEventListener("click", function(){  
        dibujarCirculos(context,height,width);  
        }, false);  
    clear.addEventListener("click", function(){  
        limpiar(context,0,0,height,width);  
        }, false);  
}

Esme Lopez Escobar

student•

CANVAS.<canvas> ...etiqueta que se usa para dibujar, y por defecto son blancos.

Para poder dibujar desde javascript, necesito obtener el canvas y ademas su contexto 2D-> (x,y)
Indicar en que punto quiero iniciar a dibujar... moveTo()
Hasta que punto? .. lineTo()
Indicar el color..... strokeStyle = "RGB";
AHORA SI, DIBUJAR stroke()

Byron Santiago Benítez Echegaray

student•

Quisiera compartir el codigo que hice, claro con ayuda de alguno de los codigos que están aqui, muchas gracias me ayudaron bastante

archivo canvas.js
var dibujo, lienzo, t, b, altoInicial, anchoInicial, diagonal;

function inicio()
{
t = document.getElementById("usuario");
b = document.getElementById("dibujalo");
dibujo = document.getElementById("dibujito");
lienzo = dibujo.getContext("2d");
altoInicial = Number(dibujo.height);
anchoInicial = Number(dibujo.width);
diagonal = Math.sqrt((Math.pow(altoInicial,2))+(Math.pow(anchoInicial,2)));
b.addEventListener("click", dibujarGrilla);

}

function dibujarGrilla ()
{
lienzo.clearRect(0, 0, anchoInicial, altoInicial);
lienzo.beginPath();

lienzo.strokeStyle = "#00F";
lienzo.arc((anchoInicial)/2,(altoInicial)/2,(diagonal/((Number(t.value))*2)), (Math.PI * 2), false);
lienzo.fillStyle = "#FF0000";
lienzo.fill();
lienzo.closePath();
lienzo.stroke();

var pony = lienzo;
var rayas = Number(t.value);
var ancho = anchoInicial;
var alto = altoInicial;

var linea, punto, puntoAncho, puntoAlto;
var anchoLinea = ancho / rayas;
var altolinea = alto / rayas;
var limiteX = ancho / anchoLinea;
var limiteY = alto / altolinea;

pony.beginPath();
pony.strokeStyle = "#AAA";
pony.moveTo(0, 0);
pony.lineTo(ancho,0);
pony.lineTo(ancho, alto);
pony.lineTo(0, alto);
pony.lineTo(0, 0);
pony.stroke();
pony.closePath();

pony.strokeStyle = "#AAA";

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

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

for(linea = 0; linea <= limiteY; linea++)
{
puntoAncho = linea * anchoLinea;
puntoAlto = linea * altolinea;
pony.beginPath();
pony.strokeStyle = "#AAA";
pony.moveTo(ancho, puntoAlto);
pony.lineTo(puntoAncho, alto);
pony.stroke();
pony.closePath();
}

}

archivo canvas.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Dibujando con Freddy Vega</title> <script type="text/javascript" src="canvas.js"></script> </head> <body> <p> <input type="text" id="usuario" /> <input type="button" id="dibujalo" value="Traza las rayas" /> </p> <canvas width="300" height="300" id="dibujito"></canvas> <h2>Dibujando con canvas~</h2> <script type="text/javascript"> inicio(); </script> </body> </html>

Anyelina Moreno Robledo

student•

Gracias por compartir, me ha solucionado algunas dudas...

José Bautista Rodríguez

student•

Hola compañeros, mi aporte:

Código de color RGB hexadecimal.

RGB hace referencia a los lets del monitor, el código que se compone así -- # + 00 + 00 + 00 -- tres series de números colocados en pares, estos moderan los colores de los 3 lets que forman los colores en los monitores, " # Rojo + verde + azul" . Los valores se manejan de 1 a 16 acorde a intensidad. La combinación entre los tres valores son los generadores de los diferentes colores. Estos son los valores de brillo:

0 = 0 0% off 5 = 5 a = 10 f = 15 El 100%

1 = 1 6 = 6 b = 11

2 = 2 7 = 7 c = 12 Son 16 valores, el cero también cuenta ;D

3 = 3 8 = 8 d = 13

4 = 4 9 = 9 e = 14

De ahí en adelante, cuando quieras colocar un color a tu gusto, recuerda las clases en el preescolar cuando combinabas pintura entre esos tres colores, funciona muy bien... O puedes consultar el circulo cromático hexadecimal.

Circulo coloreado con grilla diagonal

La parte que más me entretuvo fue colocar completa las lineas que bajan de derecha a izquierda. Cualquier recomendación es bien recibida.

  <!DOCTYPE html>

<html>

<head>

     <title> Emoji </title>

<script type="text/javascript">

    var riemas,facehappy,amarillo;

    function jaja()

         facehappy = document.getElementById("rie");

         riemas = facehappy.getContext("2d");

         amarillo = riemas;

         dibujarGrilla(riemas);

         function dibujarGrilla(po)

      var ancho= 500, alto=500;

      var linea, punto;

      var anchoLinea = 200;

      var limiteX = ancho / anchoLinea;

      var limiteY = alto /anchoLinea;

      po.strokeStyle="#99aaee";

      for(linea=0; linea <= 2 * limiteX; linea++)

        punto = linea * anchoLinea;

        po.beginPath();

        po.moveTo( 0, punto);

        po.lineTo( punto, 0);

        po.lineWidth = 6 ;

        po.stroke();

        po.closePath();

      for(linea = 0; linea <= 2*limiteY; linea++)

        punto = linea * anchoLinea;

        puntodos = -500 + punto;

        po.beginPath();

        po.moveTo(0, puntodos);

        po.lineTo(alto, punto);

        po.stroke();

        po.closePath();

		riemas.beginPath();

		riemas.strokeStyle = "#ffee33" ;

		riemas.fillStyle = "#ffff33" ;

		riemas.lineWidth = 1 ;

		riemas.arc(250,250,155,(2*3.1416),false);

		riemas.closePath();

		riemas.fill();

		riemas.stroke();

		riemas.beginPath();

		riemas.strokeStyle = "#99aaee" ;

		riemas.fillStyle = "#99aaee" ;

		riemas.lineWidth = 3 ;

		riemas.arc(254,270,100,6.0, Math.PI,false);

		riemas.closePath();

		riemas.fill();

		riemas.stroke();

		riemas.beginPath();

		riemas.strokeStyle = "#99aaee" ;

		riemas.fillStyle = "#99aaee" ;

		riemas.lineWidth = 2 ;

		riemas.arc(180,200,40,0, 2 * Math.PI,false);

		riemas.closePath();

		riemas.fill();

		riemas.stroke();

		riemas.beginPath();

		riemas.strokeStyle = "#99aaee" ;

		riemas.fillStyle = "#99aaee" ;

		riemas.lineWidth = 2 ;

		riemas.arc(310,180,30,0, 2 * Math.PI,false);

		riemas.closePath();

		riemas.fill();

		riemas.stroke();

	</script>

	<style type="text/css">

	body

		background-color: #99aaee ;

		canvas

		background-color: #bbccff ;

	</style>

</head>

<body>

	<br>

	<center><h2><font color="#bbccff" face="Arial"> Se Feliz</font></h2></center>

	<br>

	<center><canvas id="rie" width="500" height="500"></canvas></center>

	<script type="text/javascript">

		jaja();

	</script>

</body>

</html>

Freddy Vega

Team Platzi•

Que gran aporte, Jose!

Deivid Rojas

student•

super bien explicado, y muy buena forma de enseñar cada ves es mejor, y mas fácil aprender a programar, "LOS SUEÑOS DE LOS GRANDES SOÑADORES JAMÁS LLEGAN A CUMPLIRSE, SIEMPRE SON SUPERADOS" Alfred Lord Whitehead

Andre Tapaninen Zambrana

student•

Es normal que salga sangre de mi nariz y orejas cuando estoy programando jajajajaajaj

Adrian Tarcisio Campos Buenaventura

student•

Que pésima explicación de como hacer una cuadricula y hablando mal de los docentes, hizo ver lo sencillo en difícil.

Julio Cesar Labrador Rosales

student•

Esta es la manera de rellenar el circulo:primero doy las caracteristicas del relleno y luego le digo que rellene el circulo.

lienzo.fillStyle ="#AFEEEE";//color de relleno

lienzo.fill();//aplico el relleno del circulo

Juan David Pino Reyes

student•

Hola, Aquí esta mi código

<!DOCTYPE html>  
<html lang="es">  
    <head>  
        <meta charset="utf-8" />          
        <title>Canvas</title>  
        <script type="text/javascript" src="script.js"></script>  
    </head>  
    <body>  
        <h2>Dibujando con Canvas</h2>  
        <canvas width="200" height="200" id="dibujo"></canvas>  
        <script>inicio();</script>  
          
    </body>  
      
</html>

function inicio(){  
    dibujo = document.getElementById('dibujo');  
    lienzo = dibujo.getContext("2d");  
    dibujarGrilla(lienzo);  
    //Calcular el centro del canvas  
    var centroX = lienzo.canvas.width / 2 ;  
    var centroY = lienzo.canvas.height / 2;      
    var circulo    = Math.PI * 2;  
    //Dibujar orejas  
      
    lienzo.save();  
    lienzo.beginPath();  
    lienzo.strokeStyle = '#57281E';      
    lienzo.arc(centroX-50,centroY-40,25,circulo,false);  
    lienzo.fillStyle = '#57281E';  
    lienzo.fill();  
    lienzo.stroke();  
    lienzo.closePath();  
      
    lienzo.beginPath();  
    lienzo.strokeStyle = '#57281E';      
    lienzo.arc(centroX+50,centroY-40,25,circulo,false);  
    lienzo.fillStyle = '#57281E';  
    lienzo.fill();  
    lienzo.stroke();  
    lienzo.closePath();  
    lienzo.restore();  
    //Dibujar Cabeza  
    lienzo.save();  
    lienzo.beginPath();      
    lienzo.scale(0.95,0.8);  
    lienzo.strokeStyle = '#824533';  
    lienzo.arc(centroX+5,centroY+35,80,circulo,false);  
    lienzo.fillStyle = '#824533';  
    lienzo.fill();  
    lienzo.stroke();  
    lienzo.closePath();  
    lienzo.restore();  
    //Dibujar Ojos   
    lienzo.beginPath();      
    lienzo.strokeStyle = '#40130E';   
    lienzo.arc(centroX + 28,centroY-5,5.5,circulo,false);  
    lienzo.fillStyle = '#40130E';  
    lienzo.fill();  
    lienzo.stroke();  
    lienzo.closePath();  
    lienzo.beginPath();      
    lienzo.strokeStyle = '#40130E';   
    lienzo.arc(centroX - 28,centroY-5,5.5,circulo,false);  
    lienzo.fillStyle = '#40130E';  
    lienzo.fill();  
    lienzo.stroke();  
    lienzo.closePath();  
    //Dibujar trompa del oso  
    lienzo.save();  
    lienzo.scale(0.8,1.2);      
    lienzo.beginPath();      
    lienzo.strokeStyle = '#FEFEFC';  
    lienzo.arc(centroX+25,centroY+8,25,circulo,false);  
    lienzo.fillStyle = '#FEFEFC';  
    lienzo.fill();  
    lienzo.stroke();  
    lienzo.closePath();  
    lienzo.restore();  
    //Dibujar nariz del oso  
    lienzo.save();  
    lienzo.scale(1,0.7);      
    lienzo.beginPath();      
    lienzo.strokeStyle = '#5B241F';  
    lienzo.arc(centroX,centroY + 60,11,circulo,false);  
    lienzo.fillStyle = '#5B241F';  
    lienzo.fill();  
    lienzo.stroke();  
    lienzo.closePath();  
    lienzo.restore();  
}  
function dibujarGrilla(lienzo)  
{  
    var ancho = 300, alto = 300;  
    var linea;  
    var anchoLinea = 30;  
    var limiteX = ancho/anchoLinea;  
    var limiteY = alto/anchoLinea;  
    for(linea = 0; linea < (limiteX * 2); linea++)  
    {  
        lienzo.beginPath();  
        lienzo.strokeStyle = "#AAA";  
        lienzo.moveTo(0,alto - (anchoLinea*linea));  
        lienzo.lineTo((anchoLinea*linea),300);  
        lienzo.stroke();  
        lienzo.closePath();  
    }  
    for(linea = 0; linea < (limiteY * 2); linea++)  
    {  
        lienzo.beginPath();  
        lienzo.strokeStyle = "#AAA";  
        lienzo.moveTo((anchoLinea*linea),0);  
        lienzo.lineTo(0,(anchoLinea*linea));  
        lienzo.stroke();  
        lienzo.closePath();  
    }  
}

Alberto Gobbi

student•

Buen día a todos, tengan cuidado porque actualmente la función arc() tiene 6 parámetros y no 5. Puede que cuando Freddie estuviese grabando esto, la función tenía 5 parámetros únicamente (eso no lo investigué). Les funciona porque el 6to parámetro es opcional y es el precisamente corresponde a sí desean o no manejar en contrasentido a las agujas del reloj.
El 4to parámetro es ángulo inicial en radianes y el 5to parámetro es el ángulo final en radianes. Al colocar 'false' en el último parámetro funciona pero si colocan 'true' no dibujarán precisamente lo que esperaban.
Este código les funcionará:

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

Fíjense que no hay ningún 'true' o 'false'
Saludos,

Rabi Leonel Leon Chan

student•

Aquí les comparto mi tarea:
Index.html

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>Dibujando con Rabi Leon</title>  
    <script type="text/javascript" src="canvas.js"></script>  
</head>  
<body>  
    <canvas width="300" height="300" id="dibujito"></canvas>  
      
    <h1>Dibujando con Canvas</h1>  
    <script type="text/javascript">  
        inicio();  
    </script>  
</body>  
</html>

canvas.js

var dibujo, lienzo;  
function inicio()  
{  
      
    dibujo = document.getElementById("dibujito");  
    lienzo = dibujo.getContext("2d");  
      
    dibujarGrilla(lienzo);  
    // lienzo.moveTo(0,0);  
    // lienzo.lineTo(300,0);  
    // lienzo.lineTo(300,300);  
    // lienzo.lineTo(0,300);  
    // lienzo.lineTo(0,0);  
    // lienzo.strokeStyle = "#F00";  
    // lienzo.stroke();  
//hacer un trazo nuevo   
    lienzo.beginPath();  
    lienzo.strokeStyle = "#009688"  
    lienzo.arc(150,150,100,(Math.PI * 2), false);  
    lienzo.fillStyle = "#03A9F4"  
    lienzo.fill();  
    lienzo.stroke();  
    lienzo.closePath();  
     
     
  
}  
function dibujarGrilla(l){  
    var ancho = 300, alto = 300;  
    var linea;  
    var anchoLinea = 30;  
    var limiteX = ancho / anchoLinea;  
    var limiteY = alto / anchoLinea;  
    for(linea = -10; linea <= limiteX ; linea ++ )  
    {  
        punto = (linea * anchoLinea + ancho);  
        puntoB = (linea * anchoLinea);  
        l.beginPath();  
        l.strokeStyle = "#AAA";  
        l.moveTo(puntoB, 0);  
        l.lineTo(punto, 300);  
        l.stroke();  
        l.closePath;  
          
    }  
    for (linea = -10; linea <= limiteY ; linea ++) {  
        punto= (linea * anchoLinea + ancho);  
        puntoB = (linea * anchoLinea);  
        l.beginPath();  
        l.strokeStyle = "#AAA";  
        l.moveTo(0, punto);  
        l.lineTo(300,puntoB);  
        l.stroke();  
        l.closePath;  
    }  
}

Resultado

Karenn Yeraldin Hernández Duarte

student•

Grilla diagonal:

var dibujo, lienzo;  
function inicio(){  
    dibujo = document.getElementById("dibujito");  
    lienzo = dibujo.getContext("2d");  
  
    lienzo.beginPath();   
    lienzo.strokeStyle = "#00F";  
    lienzo.arc(150,150,100,(Math.PI * 2),false);   
    lienzo.fillStyle = "#0FF";   
    lienzo.fill();   
    lienzo.closePath();   
    lienzo.stroke();   
  
    grillaDiagonal(lienzo);  
}  
  
function grillaDiagonal(pony){    
      
    var ancho = 300, alto = 300;  
    var linea;  
    var anchoLinea = 60;  
    var limiteX = ancho / anchoLinea;  
    var limiteY = alto / anchoLinea;  
  
    for(linea=0;linea <= limiteX;linea++){   
        var puntoInicial = linea * anchoLinea;  
        var puntoFinal = ancho - puntoInicial;   
        pony.beginPath();  
        pony.strokeStyle = "#AAA";  
        pony.moveTo(puntoInicial,0);  
        pony.lineTo(ancho,puntoFinal);  
        pony.closePath();  
        pony.stroke();  
    }  
  
    for(linea=1;linea <= limiteX;linea++){  
        var puntoInicial = linea * anchoLinea;  
        var puntoFinal = ancho - puntoInicial;  
        pony.beginPath();  
        pony.strokeStyle = "#AAA";  
        pony.moveTo(0,puntoInicial);  
        pony.lineTo(puntoFinal,ancho);  
        pony.closePath();  
        pony.stroke();  
    }  
  
    for(linea=0;linea <= limiteY;linea++){  
        var puntoInicial = linea * anchoLinea;   
        var puntoFinal = alto - puntoInicial;   
        pony.beginPath();  
        pony.strokeStyle = "#AAA";  
        pony.moveTo(0,puntoFinal);  
        pony.lineTo(puntoFinal,0);  
        pony.closePath();  
        pony.stroke();  
    }  
  
    for(linea=1;linea <= limiteY;linea++){  
        var punto = linea * anchoLinea;   
        pony.beginPath();  
        pony.strokeStyle = "#AAA";  
        pony.moveTo(punto,alto);  
        pony.lineTo(alto,punto);  
        pony.closePath();  
        pony.stroke();  
    }  
}

var image, lines;  
function init(){  
    image = document.getElementById("lines");  
    lines = image.getContext("2d");  
    draw(lines);  
    lines.beginPath();      
    lines.styleStroke = "#ccc";  
    lines.arc(200, 200, 150, (Math.PI * 2), false);  
    lines.closePath();      
    lines.stroke();  
}  
  
  
function draw(l){  
    var i;  
    var width = 400;  
    var height = 400;  
    var space = width / 20;   
    var limitX = 400;  
    var limitY = 0;   
    for (i=0; i<space; i++){  
        l.beginPath();  
        l.moveTo(0, 0);  
        l.lineTo(limitX, limitY);  
        limitX -=space;  
        limitY +=space;                      
        l.closePath();  
        l.stroke();  
    }  
      
    var limitX = 0;  
    var limitY = 0;   
    for (i=0; i<=space; i++){  
        l.beginPath();  
        l.moveTo(0,400);  
        l.lineTo(limitX, limitY);  
        l.closePath();  
        l.stroke();  
        limitX += space;  
        limitY += space;          
          
    }  
      
    var limitX = 0;  
    var limitY = 0;   
    for (i=0; i<space; i++){  
        l.beginPath();  
        l.moveTo(400,0);  
        l.lineTo(limitX, limitY);  
        l.closePath();  
        l.stroke();  
        limitX += space;  
        limitY += space;  
    }  
      
    var limitX = 400;  
    var limitY = 0;   
    for (i=0; i<=space; i++){  
        l.beginPath();  
        l.moveTo(400,400);  
        l.lineTo(limitX, limitY);  
        l.closePath();  
        l.stroke();  
        limitX -= space;  
        limitY += space;  
    }  
      
      
}

var dibujo, lienzo;  
function inicio(){  
    dibujo = document.getElementById("dibujo");  
    lienzo = dibujo.getContext("2d");  
    grilla(lienzo);  
      
    lienzo.beginPath();  
    lienzo.strokeStyle = "#00F";  
    lienzo.arc(150,150,100,(Math.PI*2), false);  
    lienzo.closePath();  
    lienzo.stroke();  
}  
function grilla(l) {  
    var linea=0,lineas=5,anchoLinea=5;  
    var ancho=300, alto=300;  
      
    var punto;  
    for(linea = 0;linea<=lineas;linea++){  
        punto = linea*anchoLinea;  
        l.beginPath();  
        l.strokeStyle="#00FF00";  
        l.moveTo(punto,0);  
        l.lineTo(ancho,alto-punto);  
        l.stroke();  
        l.closePath();  
    }  
    for(linea = 0;linea<=lineas;linea++){  
        punto = linea*anchoLinea;  
        l.beginPath();  
        l.strokeStyle="#00FF00";  
        l.moveTo(0,punto);  
        l.lineTo(ancho-punto,alto);  
        l.stroke();  
        l.closePath();  
    }  
    for(linea = 0;linea<=lineas;linea++){  
        punto = linea*anchoLinea;  
        l.beginPath();  
        l.strokeStyle="#00FF00";  
        l.moveTo(ancho,punto);  
        l.lineTo(punto,alto);  
        l.stroke();  
        l.closePath();  
    }  
    for(linea = 0;linea<=lineas;linea++){  
        punto = linea*anchoLinea;  
        l.beginPath();  
        l.strokeStyle="#00FF00";  
        l.moveTo(ancho-punto,0);  
        l.lineTo(0,alto-punto);  
        l.stroke();  
        l.closePath();  
    }  
}

var dibujo;  
var canvas;  
var grilla, diagonal, circulos, clear;  
var numero, n;  
function dibujarGrilla(canvas,width,height)  
{  
    numero = document.getElementById("lineas");  
    var lineas = Number(numero.value);  
    var linea;  
    for (linea = 0; linea <= lineas; linea++)  
    {  
        var ancho = width/lineas  
        var largo = height/lineas  
        canvas.beginPath();  
        canvas.strokeStyle = "#AAA";  
        canvas.moveTo(ancho * linea , 0);  
        canvas.lineTo(ancho * linea , height);  
        canvas.stroke();  
        canvas.closePath();  
        canvas.beginPath();  
        canvas.strokeStyle = "#AAA";  
        canvas.moveTo(0 , largo * linea);  
        canvas.lineTo(width , largo * linea);  
        canvas.stroke();  
    }  
}  
function dibujarDiagonal(canvas,width,height)  
{  
    numero = document.getElementById("lineas");  
    var lineas = Number(numero.value);  
    var linea;  
    for (linea = 0; linea <= lineas; linea++)  
    {  
        var ancho = width/lineas  
        var largo = height/lineas  
        canvas.beginPath();  
        canvas.strokeStyle = "#AAA";  
        canvas.moveTo(ancho * linea * 2 , 300);  
        canvas.lineTo(0 , height - ancho * linea * 2);  
        canvas.stroke();  
        canvas.closePath();  
        canvas.beginPath();  
        canvas.strokeStyle = "#AAA";  
        canvas.moveTo(0 , largo * linea * 2);  
        canvas.lineTo(largo * linea * 2 , 0);  
        canvas.stroke();  
    }  
}  
function dibujarCirculos(canvas,width,height)  
{  
    numero = document.getElementById("lineas");  
    var cantidad = Number(numero.value);  
    var linea;  
    for (linea = 0; linea <= cantidad; linea++)  
    {  
        var ancho = width/cantidad  
        var largo = height/cantidad  
        canvas.beginPath();  
        context.strokeStyle = "#00f";  
        context.arc(width/2,height/2,linea*ancho/2,Math.PI*2,false);  
        context.closePath();  
        context.stroke();  
    }  
}  
function limpiar(canvas, iniciox, inicioy, width, height)  
{  
    canvas.clearRect(iniciox, inicioy, width, height);  
}  
function inicio()  
{  
    grilla = document.getElementById("grilla");  
    diagonal = document.getElementById("diagonal");  
    circulos = document.getElementById("circulos");  
    dibujo = document.getElementById("dibujo");  
    clear = document.getElementById("clear");  
    context = dibujo.getContext("2d");  
    var height = context.canvas.height;  
    var width = context.canvas.width;  
    grilla.addEventListener("click", function(){  
        dibujarGrilla(context,height,width);  
        }, false);  
    diagonal.addEventListener("click", function(){  
        dibujarDiagonal(context,height,width);  
        }, false);  
    circulos.addEventListener("click", function(){  
        dibujarCirculos(context,height,width);  
        }, false);  
    clear.addEventListener("click", function(){  
        limpiar(context,0,0,height,width);  
        }, false);  
}

José Bautista Rodríguez

student•

Hola compañeros, mi aporte:

Código de color RGB hexadecimal.

0 = 0 0% off 5 = 5 a = 10 f = 15 El 100%

1 = 1 6 = 6 b = 11

2 = 2 7 = 7 c = 12 Son 16 valores, el cero también cuenta ;D

3 = 3 8 = 8 d = 13

4 = 4 9 = 9 e = 14

Circulo coloreado con grilla diagonal

La parte que más me entretuvo fue colocar completa las lineas que bajan de derecha a izquierda. Cualquier recomendación es bien recibida.

  <!DOCTYPE html>

<html>

<head>

     <title> Emoji </title>

<script type="text/javascript">

    var riemas,facehappy,amarillo;

    function jaja()

         facehappy = document.getElementById("rie");

         riemas = facehappy.getContext("2d");

         amarillo = riemas;

         dibujarGrilla(riemas);

         function dibujarGrilla(po)

      var ancho= 500, alto=500;

      var linea, punto;

      var anchoLinea = 200;

      var limiteX = ancho / anchoLinea;

      var limiteY = alto /anchoLinea;

      po.strokeStyle="#99aaee";

      for(linea=0; linea <= 2 * limiteX; linea++)

        punto = linea * anchoLinea;

        po.beginPath();

        po.moveTo( 0, punto);

        po.lineTo( punto, 0);

        po.lineWidth = 6 ;

        po.stroke();

        po.closePath();

      for(linea = 0; linea <= 2*limiteY; linea++)

        punto = linea * anchoLinea;

        puntodos = -500 + punto;

        po.beginPath();

        po.moveTo(0, puntodos);

        po.lineTo(alto, punto);

        po.stroke();

        po.closePath();

		riemas.beginPath();

		riemas.strokeStyle = "#ffee33" ;

		riemas.fillStyle = "#ffff33" ;

		riemas.lineWidth = 1 ;

		riemas.arc(250,250,155,(2*3.1416),false);

		riemas.closePath();

		riemas.fill();

		riemas.stroke();

		riemas.beginPath();

		riemas.strokeStyle = "#99aaee" ;

		riemas.fillStyle = "#99aaee" ;

		riemas.lineWidth = 3 ;

		riemas.arc(254,270,100,6.0, Math.PI,false);

		riemas.closePath();

		riemas.fill();

		riemas.stroke();

		riemas.beginPath();

		riemas.strokeStyle = "#99aaee" ;

		riemas.fillStyle = "#99aaee" ;

		riemas.lineWidth = 2 ;

		riemas.arc(180,200,40,0, 2 * Math.PI,false);

		riemas.closePath();

		riemas.fill();

		riemas.stroke();

		riemas.beginPath();

		riemas.strokeStyle = "#99aaee" ;

		riemas.fillStyle = "#99aaee" ;

		riemas.lineWidth = 2 ;

		riemas.arc(310,180,30,0, 2 * Math.PI,false);

		riemas.closePath();

		riemas.fill();

		riemas.stroke();

	</script>

	<style type="text/css">

	body

		background-color: #99aaee ;

		canvas

		background-color: #bbccff ;

	</style>

</head>

<body>

	<br>

	<center><h2><font color="#bbccff" face="Arial"> Se Feliz</font></h2></center>

	<br>

	<center><canvas id="rie" width="500" height="500"></canvas></center>

	<script type="text/javascript">

		jaja();

	</script>

</body>

</html>

Freddy Vega

Team Platzi•

Que gran aporte, Jose!

<!DOCTYPE html>  
<html lang="es">  
    <head>  
        <meta charset="utf-8" />          
        <title>Canvas</title>  
        <script type="text/javascript" src="script.js"></script>  
    </head>  
    <body>  
        <h2>Dibujando con Canvas</h2>  
        <canvas width="200" height="200" id="dibujo"></canvas>  
        <script>inicio();</script>  
          
    </body>  
      
</html>

function inicio(){  
    dibujo = document.getElementById('dibujo');  
    lienzo = dibujo.getContext("2d");  
    dibujarGrilla(lienzo);  
    //Calcular el centro del canvas  
    var centroX = lienzo.canvas.width / 2 ;  
    var centroY = lienzo.canvas.height / 2;      
    var circulo    = Math.PI * 2;  
    //Dibujar orejas  
      
    lienzo.save();  
    lienzo.beginPath();  
    lienzo.strokeStyle = '#57281E';      
    lienzo.arc(centroX-50,centroY-40,25,circulo,false);  
    lienzo.fillStyle = '#57281E';  
    lienzo.fill();  
    lienzo.stroke();  
    lienzo.closePath();  
      
    lienzo.beginPath();  
    lienzo.strokeStyle = '#57281E';      
    lienzo.arc(centroX+50,centroY-40,25,circulo,false);  
    lienzo.fillStyle = '#57281E';  
    lienzo.fill();  
    lienzo.stroke();  
    lienzo.closePath();  
    lienzo.restore();  
    //Dibujar Cabeza  
    lienzo.save();  
    lienzo.beginPath();      
    lienzo.scale(0.95,0.8);  
    lienzo.strokeStyle = '#824533';  
    lienzo.arc(centroX+5,centroY+35,80,circulo,false);  
    lienzo.fillStyle = '#824533';  
    lienzo.fill();  
    lienzo.stroke();  
    lienzo.closePath();  
    lienzo.restore();  
    //Dibujar Ojos   
    lienzo.beginPath();      
    lienzo.strokeStyle = '#40130E';   
    lienzo.arc(centroX + 28,centroY-5,5.5,circulo,false);  
    lienzo.fillStyle = '#40130E';  
    lienzo.fill();  
    lienzo.stroke();  
    lienzo.closePath();  
    lienzo.beginPath();      
    lienzo.strokeStyle = '#40130E';   
    lienzo.arc(centroX - 28,centroY-5,5.5,circulo,false);  
    lienzo.fillStyle = '#40130E';  
    lienzo.fill();  
    lienzo.stroke();  
    lienzo.closePath();  
    //Dibujar trompa del oso  
    lienzo.save();  
    lienzo.scale(0.8,1.2);      
    lienzo.beginPath();      
    lienzo.strokeStyle = '#FEFEFC';  
    lienzo.arc(centroX+25,centroY+8,25,circulo,false);  
    lienzo.fillStyle = '#FEFEFC';  
    lienzo.fill();  
    lienzo.stroke();  
    lienzo.closePath();  
    lienzo.restore();  
    //Dibujar nariz del oso  
    lienzo.save();  
    lienzo.scale(1,0.7);      
    lienzo.beginPath();      
    lienzo.strokeStyle = '#5B241F';  
    lienzo.arc(centroX,centroY + 60,11,circulo,false);  
    lienzo.fillStyle = '#5B241F';  
    lienzo.fill();  
    lienzo.stroke();  
    lienzo.closePath();  
    lienzo.restore();  
}  
function dibujarGrilla(lienzo)  
{  
    var ancho = 300, alto = 300;  
    var linea;  
    var anchoLinea = 30;  
    var limiteX = ancho/anchoLinea;  
    var limiteY = alto/anchoLinea;  
    for(linea = 0; linea < (limiteX * 2); linea++)  
    {  
        lienzo.beginPath();  
        lienzo.strokeStyle = "#AAA";  
        lienzo.moveTo(0,alto - (anchoLinea*linea));  
        lienzo.lineTo((anchoLinea*linea),300);  
        lienzo.stroke();  
        lienzo.closePath();  
    }  
    for(linea = 0; linea < (limiteY * 2); linea++)  
    {  
        lienzo.beginPath();  
        lienzo.strokeStyle = "#AAA";  
        lienzo.moveTo((anchoLinea*linea),0);  
        lienzo.lineTo(0,(anchoLinea*linea));  
        lienzo.stroke();  
        lienzo.closePath();  
    }  
}

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>Dibujando con Rabi Leon</title>  
    <script type="text/javascript" src="canvas.js"></script>  
</head>  
<body>  
    <canvas width="300" height="300" id="dibujito"></canvas>  
      
    <h1>Dibujando con Canvas</h1>  
    <script type="text/javascript">  
        inicio();  
    </script>  
</body>  
</html>

var dibujo, lienzo;  
function inicio()  
{  
      
    dibujo = document.getElementById("dibujito");  
    lienzo = dibujo.getContext("2d");  
      
    dibujarGrilla(lienzo);  
    // lienzo.moveTo(0,0);  
    // lienzo.lineTo(300,0);  
    // lienzo.lineTo(300,300);  
    // lienzo.lineTo(0,300);  
    // lienzo.lineTo(0,0);  
    // lienzo.strokeStyle = "#F00";  
    // lienzo.stroke();  
//hacer un trazo nuevo   
    lienzo.beginPath();  
    lienzo.strokeStyle = "#009688"  
    lienzo.arc(150,150,100,(Math.PI * 2), false);  
    lienzo.fillStyle = "#03A9F4"  
    lienzo.fill();  
    lienzo.stroke();  
    lienzo.closePath();  
     
     
  
}  
function dibujarGrilla(l){  
    var ancho = 300, alto = 300;  
    var linea;  
    var anchoLinea = 30;  
    var limiteX = ancho / anchoLinea;  
    var limiteY = alto / anchoLinea;  
    for(linea = -10; linea <= limiteX ; linea ++ )  
    {  
        punto = (linea * anchoLinea + ancho);  
        puntoB = (linea * anchoLinea);  
        l.beginPath();  
        l.strokeStyle = "#AAA";  
        l.moveTo(puntoB, 0);  
        l.lineTo(punto, 300);  
        l.stroke();  
        l.closePath;  
          
    }  
    for (linea = -10; linea <= limiteY ; linea ++) {  
        punto= (linea * anchoLinea + ancho);  
        puntoB = (linea * anchoLinea);  
        l.beginPath();  
        l.strokeStyle = "#AAA";  
        l.moveTo(0, punto);  
        l.lineTo(300,puntoB);  
        l.stroke();  
        l.closePath;  
    }  
}

var dibujo, lienzo;  
function inicio(){  
    dibujo = document.getElementById("dibujito");  
    lienzo = dibujo.getContext("2d");  
  
    lienzo.beginPath();   
    lienzo.strokeStyle = "#00F";  
    lienzo.arc(150,150,100,(Math.PI * 2),false);   
    lienzo.fillStyle = "#0FF";   
    lienzo.fill();   
    lienzo.closePath();   
    lienzo.stroke();   
  
    grillaDiagonal(lienzo);  
}  
  
function grillaDiagonal(pony){    
      
    var ancho = 300, alto = 300;  
    var linea;  
    var anchoLinea = 60;  
    var limiteX = ancho / anchoLinea;  
    var limiteY = alto / anchoLinea;  
  
    for(linea=0;linea <= limiteX;linea++){   
        var puntoInicial = linea * anchoLinea;  
        var puntoFinal = ancho - puntoInicial;   
        pony.beginPath();  
        pony.strokeStyle = "#AAA";  
        pony.moveTo(puntoInicial,0);  
        pony.lineTo(ancho,puntoFinal);  
        pony.closePath();  
        pony.stroke();  
    }  
  
    for(linea=1;linea <= limiteX;linea++){  
        var puntoInicial = linea * anchoLinea;  
        var puntoFinal = ancho - puntoInicial;  
        pony.beginPath();  
        pony.strokeStyle = "#AAA";  
        pony.moveTo(0,puntoInicial);  
        pony.lineTo(puntoFinal,ancho);  
        pony.closePath();  
        pony.stroke();  
    }  
  
    for(linea=0;linea <= limiteY;linea++){  
        var puntoInicial = linea * anchoLinea;   
        var puntoFinal = alto - puntoInicial;   
        pony.beginPath();  
        pony.strokeStyle = "#AAA";  
        pony.moveTo(0,puntoFinal);  
        pony.lineTo(puntoFinal,0);  
        pony.closePath();  
        pony.stroke();  
    }  
  
    for(linea=1;linea <= limiteY;linea++){  
        var punto = linea * anchoLinea;   
        pony.beginPath();  
        pony.strokeStyle = "#AAA";  
        pony.moveTo(punto,alto);  
        pony.lineTo(alto,punto);  
        pony.closePath();  
        pony.stroke();  
    }  
}

Dibujos con canvas

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