03 3

Renderizar imagen con canvas en javascript [03]

En este tutorial vamos a renderizar imagen con canvas en javascript siguiendo estos pasos:

  • Crear nuestro primer archivo html.
  • Instalar el plugin Live Server en Visual Studio Code.
  • Agregar etiquetas html
  • Correr nuestro proyecto.
  • Agregar css y javascript en nuestro html.
Renderizar imagen con canvas en javascript

Codigo: https://github.com/programadornovato/avionJavascript/commit/db07360d109f7b2ac9cfbcd2ade86c016731b9fe

css/css.css

body{
    margin: 0px;
    padding: 0px;
    background-color:#b4dcfc;
}
#mapa{
    user-select: none;
    position: absolute;
    width: 1024px;
}
#salida{
    position: absolute;
    top: 600px;
    color:white;
}
#canvas{
    position: absolute;
    left: 0px;
}

js/juego.js

//alert("hola desde javascript");
var mapa=document.getElementById('mapa');
var anchoMapa=mapa.clientWidth;
var altoMapa=mapa.clientHeight;

var canvas=document.createElement('canvas');
canvas.width=anchoMapa;
canvas.height=altoMapa;

window.onload=function (event) {
    canvas.getContext('2d').drawImage(mapa,0,0,anchoMapa,this.altoMapa);
    document.body.appendChild(canvas);
    canvas.setAttribute('id','canvas');
}

Colors picker: https://www.w3schools.com/colors/colors_picker.asp
[Curso] TensorFlow js en Español 🇪🇸: https://www.youtube.com/playlist?list=PLCTD_CpMeEKSEOKBFyG6PxQOAvQc7HZSB
[Curso] Machine Learning JavaScript en Español 🇪🇸 con ML5: https://www.youtube.com/playlist?list=PLCTD_CpMeEKQYuoil2uSTX19S8Mfmny6B
[Curso] Java Netbeans Completo☕: https://www.youtube.com/playlist?list=PLCTD_CpMeEKTT-qEHGqZH3fkBgXH4GOTF
Como sacar las comillas invertidas: https://platzi.com/discusiones/1339-fundamentos-javascript/52373-hola-a-todos-tengo-una-consulta-alguien-sabe-como-hacer-las-comillas-invertidas-con-el-teclado/

🎦 Esta lista de reproducción: https://www.youtube.com/playlist?list=PLCTD_CpMeEKRTg39rjg2AqNxQCTz_UiBR .
Codigos en gdrive: https://drive.google.com/drive/folders/1v6u0tPYPRm_7qSbEt6IPghdzr9A9f08a?usp=sharing

🔗 Facebook: https://facebook.com/ProgramadorNovatoOficial
🔗 Twitter: https://twitter.com/programadornova
🔗 Linkedin: https://www.linkedin.com/in/programadornovato/
🔗 Instagram: https://www.instagram.com/programadornovato/

<<Anterior tutorial Siguiente tutorial >>

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

En Programador Novato vivimos de los anuncios, hemos detectado que está utilizando extensiones para bloquear anuncios. Ayudanos deshabilitando tu bloqueador de anuncios. :)