En esta penúltima parte, declaramos las funciones que nos permitirán pintar los shapes en el canvas, vamos al grano que la vida es corta 😉
Cada función de pintado tiene una correspondencia con los objetos declarados en la parte 4 de este tutorial, se antepone la palabra draw (dibujar) al nombre de la función de la forma «candidato» -> «drawCandidato».
function drawNoData( x , y , nulos, blancos ) { ctx.beginPath(); ctx.rect(x, y , 450, 160); ctx.closePath(); ctx.fillStyle = 'yellow'; ctx.fill(); ctx.lineWidth = 4; ctx.strokeStyle = 'black'; ctx.stroke(); ctx.lineWidth = 1; ctx.fillStyle = 'black'; ctx.font = 'Bold 22pt Calibri'; ctx.fillText( "NULOS" , x + 20, y + 50); ctx.fillText( "BLANCOS" , x + 20 , y + 130); //___NULOS ctx.beginPath(); ctx.rect( x + 150 , y+20 , nulos*2 , 40); ctx.closePath(); ctx.fillStyle = '#0005E3' ; ctx.fill(); ctx.lineWidth = 0; ctx.fillStyle = 'black'; ctx.font = 'Bold 24pt Calibri'; ctx.fillText( (nulos==0) ?'' : nulos + "%" , x + 180, y+50 ); //blancos ctx.beginPath(); ctx.rect( x + 150 , y+100 , blancos*2 , 40); ctx.closePath(); ctx.fillStyle = 'white' ; ctx.fill(); ctx.lineWidth = 0; ctx.fillStyle = 'black'; ctx.font = 'Bold 24pt Calibri'; ctx.fillText( (blancos==0) ?'' : blancos + "%" , x + 180, y+130 ); }
Función para pintar los shapes que corresponden a los candidatos.
function drawCandidato( x, y , name , sigla , image , votos , color_votos ) { ctx.beginPath(); ctx.rect(x, y , 450, 160); ctx.closePath(); ctx.fillStyle = '#FCFF00'; ctx.fill(); ctx.lineWidth = 4; ctx.strokeStyle = 'black'; ctx.stroke(); ctx.lineWidth = 1; ctx.drawImage( image , x +20, y + 50 ,100,100); ctx.fillStyle = 'black'; ctx.font = 'Normal 12pt Calibri'; ctx.fillText( name , x + 20, y + 20); ctx.fillText( sigla , x + 20 , y + 40); //pinta los resultados de la eleccion drawData( x + 150, y+50 , votos, color_votos ) ; }
Y las funciones de pintado del resto de los shapes, no me detendré a explicar en detalle como es que se dibujan los shapes en el canvas, eso corresponde a tutoriales básicos sobre HTML5.
/** * Pinta el rectangulo de votacion */ function drawData( x , y , value , color_votos ) { ctx.beginPath(); ctx.rect( x , y , value*2 , 100); ctx.closePath(); ctx.fillStyle = color_votos ; ctx.fill(); ctx.lineWidth = 0; ctx.fillStyle = 'black'; ctx.font = 'Bold 42pt Calibri'; ctx.fillText( (value==0) ?'' : value + "%" , x + 40, y+70 ); } /** * pues que digo :/ */ function drawTitle( x, y , name ) { ctx.font = 'Bold 42pt Calibri'; ctx.fillText( name , x , y ); } /** * Muestra una ventana de espera */ function drawProcess( x , y , imageLoad ) { ctx.beginPath(); ctx.rect( x, y , 260, 100); ctx.closePath(); ctx.fillStyle = 'white'; ctx.fill(); ctx.lineWidth = 4; ctx.strokeStyle = 'black'; ctx.stroke(); ctx.lineWidth = 1; ctx.drawImage(imageLoad, x + 17 , y+20 ,64,64); ctx.fillStyle = 'black'; ctx.font = 'Normal 12pt Calibri'; ctx.fillText( "Procesando...." , x+100, y+40); ctx.fillText( "Por favor espere." , x + 100, y+80); }
Si bien declaramos un objeto para cada función de pintado [ver parte 4], también podemos pintar un shape sin tener que declarar un objeto, como es el caso de esta función «drawTooltip()», esta función nos servirá para mostrar una pequeño recuadro de texto similar a un Tooltip en java o a una etiqueta ALT de HTML.
function drawTooltip( x, y , textosup, textoinf ) { ctx.beginPath(); ctx.rect(x, y , 220, 60); ctx.closePath(); ctx.fillStyle = '#EFED43'; ctx.fill(); ctx.lineWidth = 2; ctx.strokeStyle = 'black'; ctx.stroke(); ctx.lineWidth = 1; ctx.fillStyle = 'black'; ctx.font = 'Normal 22pt Calibri'; ctx.fillText( textosup , x + 20, y +24); ctx.font = 'Normal 16pt Calibri'; ctx.fillText( textoinf , x+ 20, y+50 ); }
Aún nos falta una función de pintado, pero eso lo veremos en la última parte de este tutorial 🙂
Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.
Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye
Enjoy! :)
Los archivos digitales (txt, docx, xlsx, odt, odp, pdf, etc) nos permiten almacenar información el cual en ocasiones, de...
SOAP (Simple Object Access Protocol) es un protocolo estándar que define cómo dos objetos en diferentes procesos pueden...
Segunda parte del tutorial [Crea tu blog con el patrón MVC y php]. En esta 2da parte toca ver lo que es la creación del...
Un SGA «Sistema de Gestión de Almacenes» es un programa informático destinado a gestionar las entradas y salidas de pro...
En ocasiones debemos insertar varios registros a nuestra base de datos desde nuestra aplicación java y lo que usualmente...
Blockly proyecto de Google for Education, es una biblioteca en JavaScript que agrega un editor de código visual a aplica...
Los comentarios estan cerrados
Por lo general se usan transacciones a nivel base de datos y posteriormente se llaman estos a través de procedimientos a...
En este post, aprenderemos como conectar Visual Basic 6 con SQL Server, abrir una tabla, leer su contenido y mostrar est...
Lo que veremos en este post es la configuración del driver para PHP de SQL Server que ha creado Microsoft el cual permit...
Google Bard la inteligencia artificial de Google se actualiza con una mejora que entra a competir con el resto de IAs y...
Hola mouse,
una consulta bro, donde pego todas esas funciones en elecciones.js?
Gracias.