Insertar imágenes en canvas

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

Danelia Sanchez

student•

Nota: onload es un evento que se activa cuando se ha cargado la imagen. Con este evento se puede ejecutar acciones justo en el instamte cuando se cargó la imagen, como disparar una función.

Germán Restrepo Fernández

student•

Me parece una "Buena Práctica" definir los objetos con todos sus atributos o propiedades, así:

var tifis =   
{  
    frente: new Image(),  
    atras: new Image(),  
    izq: new Image(),  
    der: new Image(),  
    frenteOK: false,  
    atrasOK: false,  
    derOK: false,  
    izqOK: false,  
    velocidad: 20,  
    x: 0,  
    y: 0  
};

Santiago Avellaneda

student•

Correcto, cierto es, creo que lo hacen así en el video con el objetivo que uno se esfuerze un poco más, tienes razón, es buena práctica, igual el curso es básico, mientras se aprende, saludos

David Antonio Ordóñez Cornejo

student•

Mi código:

console.log('funciona JS');

// Variables globales, no precisamente una buena práctica

var tablero;

// variable fondo de notación json
var fondo = {
};

function funcionInicio () {
console.log('Listo para dibujar');

//Comenzamos

// Obtener el canvas
var canvas = document.getElementById("campo");

//Obtener contexto del canvas
tablero = canvas.getContext("2d");

//Insertar la imagen de fondo

//comprobar mi variable global fondo

//crear la imagen agregando propiedades a fondo
fondo.imagenURL = "fondo.png";
fondo.imagen = new Image();
//Comprobación
console.log(fondo);

//Cargar la imagen al atributo src de objeto imagen guardado en imagen
fondo.imagen.src = fondo.imagenURL;
//Comprobación
console.log(fondo);

//Insertar la imagen en el documento mediante un evento
fondo.imagen.onload = dibujarFondo; //La función sólo se referencía, no debe llevar parántesis
}
function dibujarFondo () {
// Esto agrega ahora sí la imagen
tablero.drawImage(fondo.imagen, 0, 0); //Es una función propia de canvas
}

Javier Aguirre Roman

student•

pero un JSON es diferente a un objeto de javascript, un JSON es una string y es similar su forma de estructurar los datos a un objeto de javascript pero no es un objeto javascript...

Usuario anónimo

user•

JSON = Javascript Object Notation

Borja

student•

Hay gente que os critica (siempre la habrá...), pero en ningún sitio me han explicado tan bien las cosas. Cuando veo que algo no se me ha quedado claro, se que sacarás tu tablet Pro y arreglado. Muchas gracias Platzi!!

Hugo perez garcia

student•

¿se pueden insertar videos en canvas? o como hago para animar un juego con un video si he perdido o si he ganado. ¿se puede insertar un .gif animado mientras suene audio?
gracias.

Abraham

student•

Veamos si entendí bien esta parte:

var  canvas = document.getElementById("campo");  
    tablero = canvas.getContext("2d");  
      
    fondo.imagen = new Image();  
    fondo.imagen.src = fondo.imagenURL;  
    fondo.imagen.onload = dibujarFondo;

en la 1º linea es para extraer o utilizar el canvas "campo" del html .
en la 2º es para definir su contexto, en este caso es 2d
en la 3º (tengo dudas) pero entiendo que es para decir que irá una imagen.
Me gustaría que me expliquen la 3º lineaen la 4º es para extraer la URL de donde está ubicada la imagen y cargar. (no mostrar)
en la 5º es para mostrar la imagen que se ha cargado.

William Nolasco Barrientos

student•

La 3 linea, quiere decir que le hemos dado una propiedad al objeto fondo, su propiedad se llama imagen y la pudimos haber creado dentro del objeto fondo, pero tambien se puede crear en otra parte cono en una funcion(de esa manera lo hizo en la clase), y para referirnos a el lo llamamos como fondo.imagen y le hemos dado el valor de new Image(), este ultimo es para decir que voy a crear una imagen

john fredy quimbaya orozco

student•

var tablero  
var fondo=  
{  
    imagenURL: "fondo.png"  
  
}  
function inicio ()  
{  
    var canvas = document.getElementById("campo");  
    tablero= canvas.getContext("2d");  
    fondo.imagen = new Image();  
    fondo.imagen.src = fondo.imagenURL;  
    fondo.imagen.onload= dibujarFondo;  
   
  
}  
function dibujarFondo()  
{  
    tablero.drawImage(fondo.imagen,0,0);

Abraham

student•

Una duda: siendo la variable global

var fondo = {  
    imagenURL: "fondo.png"  
};

cual es la función de fondo.imagen = new Image(); ??

Eso me dejo algo en dudas, es posible de alguna manera inserta una imagen con nada más la variable o es necesario agregar el fondo.imagen = new Image(); para su funcionamiento?

Chris Espina

student•

Estoy igual que tú.

Eduardo Lemus Zavala

student•

Para agregar estilos a nuestra pagina, se utiliza la etiqueta style:

Eduardo Lemus Zavala

student•

fondo.imagen.onload = dibujarFondo; <- No se usan los parentesis, pues de usarlos la función se invocaría inmediatamente.
dibuja.imagen.drawImage(fondo.imagen,0,0); <-- posición inicial de la imagen

Erick Orlando Velasco Martínez

student•

También se puede ahorrar líneas de código colocando así:
fondo.imagen = new Image();
fondo.imagen.src = fondo.imagenURL;
fondo.imagen.onload = function () {
tablero.drawImage(fondo.imagen, 0, 0);
}

Erick Orlando Velasco Martínez

student•

Se entendió todo perfectamente

Gabriel Albán

student•

<!DOCTYPE html> <html style="height: 1000px; width: 1000px;"> <head> <meta charset="utf-8"> <title>|La Leyenda de Tifis v1.01|</title> <style type="text/css">body{background: black;}</style> <script type="text/javascript" src="tifis.js"></script> </head> <body> <canvas id="field" weight="500" width="500" style="height: 500px; width: 500px;"></canvas> <script type="text/javascript">start();</script> </body> </html>

var board;
var background =
{
imageURL:"background.png"
};
function start()
{
var campField = document.getElementById("field");
board = campField.getContext("2d");
background.image = new Image();
background.image.src = background.imageURL;
background.image.onload = drawBackground;
}
function drawBackground()
{
board.drawImage(background.image, 0, 0);
}

Gabriel Albán

student•

El Problema es que la imagen (fondo.png renombrada como background.png) me sale a 500 x 150

Jhon Carlos Colorado Angulo

student•

Comprendido perfectamente gracias.

Santiago

student•

Hola, tengo un problema con el código que me quedó de ésta clase, cuando lo ejecuto me sale el error "Uncaught TypeError: Cannot read property 'getContext' of null" y no encuentro nada googleando que me sirva. Mi código es el siguiente (que no veo que tenga diferencias con respecto al de la clase)

var tablero;  
var fondo = {  
    imagenURL: "fondo.png"  
};  
  
  
function inicio()  
{  
    var canvas = document.getElementById("campo");  
    tablero = canvas.getContext("2d");  
  
    fondo.imagen = new Image();  
    fondo.imagen.src = fondo.imagenURL;  
    fondo.imagen.onload = dibujarFondo;  
}  
function dibujarFondo()  
{  
    tablero.drawImage(fondo.imagen, 0, 0);  
}

Les agradezco cualquier tipo de ayuda que me puedan brindar (Y)

Samuel Martínez Manzano

student•

Hola Santiago,

lo más probable es que tu error no se encuentre en el código Javascript, sino en el fichero HTML. Cuando te da el error de que no puede leer la propiedad getContext de un null seguramente sea por los siguiente:

Es posible que no tengas definido en la etiqueta canvas del archivo HTML un identificador llamado *campo,*con lo cual tu código Javascript no sabe a qué elemento te refieres cuando llamas a la función document.getElementById.

Axel de la Torre

student•

Me pasó algo muy similar, y al repetir el ejercicio desde 0 funciono, no entiendo por qué ): si te enteras dime :P

Axel de la Torre

student•

No entiendo porque si hice exactamente lo mismo no se dibuja mi fondo ):
Me da:
:22 Uncaught TypeError: Cannot read property 'drawImage' of undefined

var tablero;  
var fondo = {  
    imagenURL: "fondo.png"  
};  
  
function inicio ()   
{  
    alert("Que comiesadfasdnce el juego");  
  
    var canvas = document.getElementById("c");  
    canvas.width = 600;  
    canvas.height = 500;  
    var tablero = canvas.getContext ("2d");  
  
    fondo.imagen = new Image();  
    fondo.imagen.src = fondo.imagenURL;  
    fondo.imagen.onload = dibujarFondo;  
}  
  
function dibujarFondo()  
{  
        tablero.drawImage(fondo.imagen, 0,0);  
}

Alguien ve algo??

Axel de la Torre

student•

No entiendo como pero funciono ahora :/
Chale ahora si que me confundí, alguien nota la diferencia D:?????

var tablero;  
var fondo = {  
    imagenURL : "fondo.png"  
};  
  
function inicio ()   
{  
    var canvas = document.getElementById("c");  
    tablero = canvas.getContext("2d");  
  
    fondo.imagen = new Image();  
    fondo.imagen.src = fondo.imagenURL;  
    fondo.imagen.onload = dibujarFondo;  
}  
  
function dibujarFondo ()   
{  
    tablero.drawImage(fondo.imagen, 0,0);  
}

Alexander

student•

La velocidad de la conexion a internet en Venezuela no me deja ver los videos de Platzy. Que lastima, soon muy buenos.

Ley Vargas

student•

Intentaste ya con el otro servidor? En mi caso también tengo pésimo Internet pero con el servidor B me va bien.

Fabricio Diaz Nievas

student•

Hola compañeros! tengo una duda, por que en algunos casos se usa " : " y en otros " = "? que diferencia hay?

Almudena Guerras

student•

Hola,
¿Te refieres a los " : " escritos en el objeto fondo?

En javascript cuando declaramos una variable y le asignamos un valor utilizamos el signo " = ".
Ej: var canvas = document.getElementById("campo");

Pero cuando declaramos un objeto utilizamos el signo “ : ” ya que utilizamos la notación JSON, notación para la creación de objetos en javascript.

En JSON los datos se definen por pares: “nombre”, “valor”. A cada nombre le asignamos un valor mediante el signo “ : “.

Ej: objeto = {
nombre: valor
}
Ej: var fondo = {
imagenURL: "img/fondo.png”
}

No sé si esto responde tu pregunta. ;)

Fernando López Moreno

student•

Fácil compañero. Los puntos dobles se usan para asignar un valor a una propiedad dentro de un objeto JSON y el signo de igual para asignar un valor a una variable (fuera de JSON).

Dentro de JSON:

{  
propiedad: "Cadena de Texto"  
}

Fuera de JSON:

var bar = "Cadena de Texto";

var tifis =   
{  
    frente: new Image(),  
    atras: new Image(),  
    izq: new Image(),  
    der: new Image(),  
    frenteOK: false,  
    atrasOK: false,  
    derOK: false,  
    izqOK: false,  
    velocidad: 20,  
    x: 0,  
    y: 0  
};

var  canvas = document.getElementById("campo");  
    tablero = canvas.getContext("2d");  
      
    fondo.imagen = new Image();  
    fondo.imagen.src = fondo.imagenURL;  
    fondo.imagen.onload = dibujarFondo;

var tablero  
var fondo=  
{  
    imagenURL: "fondo.png"  
  
}  
function inicio ()  
{  
    var canvas = document.getElementById("campo");  
    tablero= canvas.getContext("2d");  
    fondo.imagen = new Image();  
    fondo.imagen.src = fondo.imagenURL;  
    fondo.imagen.onload= dibujarFondo;  
   
  
}  
function dibujarFondo()  
{  
    tablero.drawImage(fondo.imagen,0,0);

var tablero;  
var fondo = {  
    imagenURL: "fondo.png"  
};  
  
  
function inicio()  
{  
    var canvas = document.getElementById("campo");  
    tablero = canvas.getContext("2d");  
  
    fondo.imagen = new Image();  
    fondo.imagen.src = fondo.imagenURL;  
    fondo.imagen.onload = dibujarFondo;  
}  
function dibujarFondo()  
{  
    tablero.drawImage(fondo.imagen, 0, 0);  
}

var tablero;  
var fondo = {  
    imagenURL: "fondo.png"  
};  
  
function inicio ()   
{  
    alert("Que comiesadfasdnce el juego");  
  
    var canvas = document.getElementById("c");  
    canvas.width = 600;  
    canvas.height = 500;  
    var tablero = canvas.getContext ("2d");  
  
    fondo.imagen = new Image();  
    fondo.imagen.src = fondo.imagenURL;  
    fondo.imagen.onload = dibujarFondo;  
}  
  
function dibujarFondo()  
{  
        tablero.drawImage(fondo.imagen, 0,0);  
}

var tablero;  
var fondo = {  
    imagenURL : "fondo.png"  
};  
  
function inicio ()   
{  
    var canvas = document.getElementById("c");  
    tablero = canvas.getContext("2d");  
  
    fondo.imagen = new Image();  
    fondo.imagen.src = fondo.imagenURL;  
    fondo.imagen.onload = dibujarFondo;  
}  
  
function dibujarFondo ()   
{  
    tablero.drawImage(fondo.imagen, 0,0);  
}

Insertar imágenes en 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

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