04 3

Detectar colores y pintar en javascript [04]

En este tutorial vamos a detectar colores y pintar en javascript siguiendo estos pasos:

  • Evento mousemove y click.
  • Obtener los colores de cada pixel de nuestro mapa.
  • RGB (red,green y blue osea rojo, verde y azul).
  • fillRect (rellenar una área de forma rectangular).
Detectar colores y pintar en javascript

Codigo: https://github.com/programadornovato/avionJavascript/commit/887e96406cd42c76e97468cae9221065c8872fc6

css/css.css

body{
    margin: 0px;
    padding: 0px;
    background-color:#b4dcfc;
    cursor: crosshair;
}
#mapa{
    user-select: none;
    position: absolute;
    width: 1024px;
}
#salida{
    position: absolute;
    top: 600px;
    color:black;
}
#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');
}
document.addEventListener('mousemove',function (event) {
    var datosDelPixel=canvas.getContext('2d').getImageData(event.offsetX,event.offsetY,1,1).data;
    document.getElementById('salida').innerHTML=`ROJO=${datosDelPixel[0]} VERDE=${datosDelPixel[1]} AZUL=${datosDelPixel[2]} ALFA=${datosDelPixel[3]} `
});
document.addEventListener('click',function (event) {
    llenarArea(event.offsetX,event.offsetY);
});
function llenarArea(x,y){
    var posx=x;
    var posy=y;
    var ctx=canvas.getContext('2d');
    ctx.fillStyle="rgb(255, 0, 0)";
    ctx.fillRect(posx,posy,6,6);
}

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. :)