// Función para dibujar la tabla periódica function Dibujar(ctx){ ctx.font="20px Courier"; // Tamaño y tipo de fuente inicial ctx.fillStyle ="#80ffff"; // Cambio color para dibujar en cianc ctx.fillRect (10, 10, 30, 30); // Dibujo el primer recuadro ctx.fillStyle ="#ffff00"; // Cambio color para dibujar en amarillo ctx.fillRect (10, 50, 30, 30); // Dibujo el segundo recuadro hacía abajo ctx.fillRect (10, 90, 30, 30); // Dibujo el tercer recuadro hacía abajo ctx.fillRect (10, 130, 30, 30); // Dibujo el cuarto recuadro hacía abajo ctx.fillRect (10, 170, 30, 30); // Dibujo el quinto recuadro hacía abajo ctx.fillRect (10, 210, 30, 30); // Dibujo el sexto recuadro hacía abajo ctx.fillRect (10, 250, 30, 30); // Dibujo el séptimo recuadro hacía abajo ctx.fillStyle ="#e67300"; // Cambio color para dibujar en tono entre anaranjado y marrón (café) ctx.fillRect (50, 50, 30, 30); ctx.fillRect (50, 90, 30, 30); ctx.fillRect (50, 130, 30, 30); ctx.fillRect (50, 170, 30, 30); ctx.fillRect (50, 210, 30, 30); ctx.fillRect (50, 250, 30, 30); ctx.fillStyle ="#ff3333"; ctx.fillRect (90, 130, 30, 30); ctx.fillRect (90, 170, 30, 30); ctx.fillStyle ="#ffcccc"; ctx.fillRect (90, 210, 30, 30); ctx.fillStyle ="#80ffff"; ctx.fillRect (90, 250, 30, 30); ctx.fillStyle ="#ff3333"; ctx.fillRect (130, 130, 30, 30); ctx.fillRect (130, 170, 30, 30); ctx.fillRect (130, 210, 30, 30); ctx.fillRect (130, 250, 30, 30); ctx.fillRect (170, 130, 30, 30); ctx.fillRect (170, 170, 30, 30); ctx.fillRect (170, 210, 30, 30); ctx.fillRect (170, 250, 30, 30); ctx.fillRect (210, 130, 30, 30); ctx.fillRect (210, 170, 30, 30); ctx.fillRect (210, 210, 30, 30); ctx.fillRect (210, 250, 30, 30); ctx.fillRect (250, 130, 30, 30); ctx.fillRect (250, 170, 30, 30); ctx.fillRect (250, 210, 30, 30); ctx.fillRect (250, 250, 30, 30); ctx.fillRect (290, 130, 30, 30); ctx.fillRect (290, 170, 30, 30); ctx.fillRect (290, 210, 30, 30); ctx.fillRect (290, 250, 30, 30); ctx.fillRect (330, 130, 30, 30); ctx.fillRect (330, 170, 30, 30); ctx.fillRect (330, 210, 30, 30); ctx.fillRect (330, 250, 30, 30); ctx.fillRect (370, 130, 30, 30); ctx.fillRect (370, 170, 30, 30); ctx.fillRect (370, 210, 30, 30); ctx.fillRect (370, 250, 30, 30); ctx.fillRect (410, 130, 30, 30); ctx.fillRect (410, 170, 30, 30); ctx.fillRect (410, 210, 30, 30); ctx.fillRect (410, 250, 30, 30); ctx.fillStyle ="#e6b3cc"; ctx.fillRect (450, 130, 30, 30); ctx.fillRect (450, 170, 30, 30); ctx.fillRect (450, 210, 30, 30); ctx.fillRect (450, 250, 30, 30); ctx.strokeText("H",17,30); // Escribo el símbolo H (Hidrógeno) en una posición determinada ctx.strokeText("Li",15,70); // Escribo el símbolo Li (Litio) en una posición determinada ctx.strokeText("Na",13,110); ctx.strokeText("K",17,150); ctx.strokeText("Rb",13,190); ctx.strokeText("Cs",13,230); ctx.strokeText("Fr",13,270); ctx.strokeText("Be",55,70); ctx.strokeText("Mg",53,110); ctx.strokeText("Ca",53,150); ctx.strokeText("Sr",53,190); ctx.strokeText("Ba",53,230); ctx.strokeText("Ra",53,270); ctx.strokeText("Sc",93,150); ctx.strokeText("Y",97,190); ctx.font="8px Courier"; // Cambio el tamaño de la fuente ctx.strokeText("La-Lu",93,230); ctx.strokeText("Ac-Lr",93,270); ctx.font="20px Courier"; // Cambio el tamaño de la fuente volviendo al inicial ctx.strokeText("Ti",133,150); ctx.strokeText("Zr",133,190); ctx.strokeText("Hf",133,230); ctx.strokeText("Rf",133,270); ctx.strokeText("V",177,150); ctx.strokeText("Nb",173,190); ctx.strokeText("Ta",173,230); ctx.strokeText("Db",173,270); ctx.strokeText("Cr",213,150); ctx.strokeText("Mo",213,190); ctx.strokeText("W",217,230); ctx.strokeText("Sg",213,270); ctx.strokeText("Mn",253,150); ctx.strokeText("Tc",253,190); ctx.strokeText("Re",253,230); ctx.strokeText("Bh",253,270); ctx.strokeText("Fe",293,150); ctx.strokeText("Ru",293,190); ctx.strokeText("Os",293,230); ctx.strokeText("Hs",293,270); ctx.strokeText("Co",333,150); ctx.strokeText("Rh",333,190); ctx.strokeText("Ir",333,230); ctx.strokeText("Mt",333,270); ctx.strokeText("Ni",373,150); ctx.strokeText("Pd",373,190); ctx.strokeText("Pt",373,230); ctx.font="13px Courier"; ctx.strokeText("Uun",373,270); ctx.font="20px Courier"; ctx.strokeText("Cu",413,150); ctx.strokeText("Ag",413,190); ctx.strokeText("Au",413,230); ctx.font="13px Courier"; ctx.strokeText("Uuu",413,270); ctx.font="20px Courier"; ctx.strokeText("Zn",453,150); ctx.strokeText("Cd",453,190); ctx.strokeText("Hg",453,230); ctx.font="13px Courier"; ctx.strokeText("Uub",453,270); } // Función para obtener la posición del ratón function PosicionRaton(canvas, evt) { var rect = canvas.getBoundingClientRect(); return { x: evt.clientX - rect.left, y: evt.clientY - rect.top }; } // Función para mostrar la información de los elemento químicos según la posición del ratón function MostrarInformacion(x, y) { // Hago el chequeo para que la posición del ratón esté entre las distancias del recuadro del Hidrógeno H y muestro la información en una ventana emergente con alert. if (x>=10 && x<=40 && y>=10 && y<=40){ alert("Nombre: Hidrógeno \nSímbolo: H \nÁtomo: 1 \nMasa: 1,00794 \nEstado: Gas \nDescubridor: Henry Cavendish \nLugar de descubrimiento: Londres (Inglaterra) \nAño de descubrimiento: 1766");} else if (x>=10 && x<=40 && y>=50 && y<=80){ alert("Nombre: Litio \nSímbolo: Li \nÁtomo: 3 \nMasa: 6,941 \nEstado: Sólido \nDescubridor: Johan August Arfvedson \nLugar de descubrimiento: Estocolmo (Suecia) \nAño de descubrimiento: 1817");} else if (x>=10 && x<=40 && y>=90 && y<=120){ alert("Nombre: Sodio \nSímbolo: Na \nÁtomo: 11 \nMasa: 22,9898 \nEstado: Sólido \nDescubridor: Sir Humphrey Davy \nLugar de descubrimiento: Inglaterra \nAño de descubrimiento: 1807 ");} else if (x>=10 && x<=40 && y>=130 && y<=160){ alert("Nombre: Potasio \nSímbolo: K \nÁtomo: 19 \nMasa: 39,0983 \nEstado: Sólido \nDescubridor: Sir Humphrey Davy \nLugar de descubrimiento: Inglaterra \nAño de descubrimiento: 1807 ");} else if (x>=10 && x<=40 && y>=170 && y<=200){ alert("Nombre: Rubidio \nSímbolo: Rb \nÁtomo: 37 \nMasa: 85,4678 \nEstado: Sólido \nDescubridor: Robert Bunsen, Gustav Kirchhoff \nLugar de descubrimiento: Alemania \nAño de descubrimiento: 1861 ");} else if (x>=10 && x<=40 && y>=210 && y<=240){ alert("Nombre: Cesio \nSímbolo: Cs \nÁtomo: 55 \nMasa: 132,905 \nEstado: Sólido \nDescubridor: Robert Bunsen, Gustav Kirchhoff \nLugar de descubrimiento: Alemania \nAño de descubrimiento: 1860 ");} else if (x>=10 && x<=40 && y>=250 && y<=280){ alert("Nombre: Francio \nSímbolo: Fr \nÁtomo: 87 \nMasa: (223,02) \nEstado: Líquido \nDescubridor: Marguerite Perey \nLugar de descubrimiento: Francia \nAño de descubrimiento: 1939");} else if (x>=50 && x<=90 && y>=50 && y<=90){ alert("Nombre: Berilio \nSímbolo: Be \nÁtomo: 4 \nMasa: 9,0122 \nEstado: Sólido \nDescubridor: Nicholas Louis Vauquelin \nLugar de descubrimiento: Francia \nAño de descubrimiento: 1798");} else if (x>=50 && x<=90 && y>=100 && y<=130){ alert("Nombre: Manganeso \nSímbolo: Mg \nÁtomo: 12 \nMasa: 24,3050 \nEstado: Sólido \nDescubridor: Sir Humphrey Davy \nLugar de descubrimiento: Inglaterra \nAño de descubrimiento: 1808");} else if (x>=50 && x<=90 && y>=140 && y<=170){ alert("Nombre: Calcio \nSímbolo: Ca \nÁtomo: 20 \nMasa: 40,078 \nEstado: Sólido \nDescubridor: Sir Humphrey Davy \nLugar de descubrimiento: Inglaterra \nAño de descubrimiento: 1808");} else if (x>=50 && x<=90 && y>=180 && y<=210){ alert("Nombre: Estroncio \nSímbolo: Sr \nÁtomo: 38 \nMasa: 87,62 \nEstado: Sólido \nDescubridor: Sir Humphrey Davy \nLugar de descubrimiento: Inglaterra \nAño de descubrimiento: 1808");} else if (x>=50 && x<=90 && y>=220 && y<=250){ alert("Nombre: Bario \nSímbolo: Ba \nÁtomo: 56 \nMasa: 137,327 \nEstado: Sólido \nDescubridor: Sir Humphrey Davy \nLugar de descubrimiento: Inglaterra \nAño de descubrimiento: 1808");} else if (x>=50 && x<=90 && y>=260 && y<=290){ alert("Nombre: Radio \nSímbolo: Ra \nÁtomo: 88 \nMasa: (226,03) \nEstado: Sólido \nDescubridor: Marie y Pierre Curie \nLugar de descubrimiento: Francia \nAño de descubrimiento: 1898");} else if (x>=100 && x<=130 && y>=140 && y<=170){ alert("Nombre: Escandio \nSímbolo: Sc \nÁtomo: \nMasa: \nEstado: \nDescubridor: \nLugar de descubrimiento: \nAño de descubrimiento: ");} else if (x>=100 && x<=130 && y>=180 && y<=210){ alert("Nombre: \nSímbolo: Y \nÁtomo: \nMasa: \nEstado: \nDescubridor: \nLugar de descubrimiento: \nAño de descubrimiento: ");} else if (x>=100 && x<=130 && y>=220 && y<=250){ alert("Nombre: \nSímbolo: La \nÁtomo: \nMasa: \nEstado: \nDescubridor: \nLugar de descubrimiento: \nAño de descubrimiento: ");} else if (x>=100 && x<=130 && y>=260 && y<=290){ alert("Nombre: \nSímbolo: Ac \nÁtomo: \nMasa: \nEstado: \nDescubridor: \nLugar de descubrimiento: \nAño de descubrimiento: ");} else if (x>=140 && x<=170 && y>=140 && y<=170){ alert("Nombre: \nSímbolo: Ti \nÁtomo: \nMasa: \nEstado: \nDescubridor: \nLugar de descubrimiento: \nAño de descubrimiento: ");} else if (x>=140 && x<=170 && y>=180 && y<=210){ alert("Nombre: \nSímbolo: Zr \nÁtomo: \nMasa: \nEstado: \nDescubridor: \nLugar de descubrimiento: \nAño de descubrimiento: ");} else if (x>=140 && x<=170 && y>=220 && y<=250){ alert("Nombre: \nSímbolo: Hf \nÁtomo: \nMasa: \nEstado: \nDescubridor: \nLugar de descubrimiento: \nAño de descubrimiento: ");} else if (x>=140 && x<=170 && y>=260 && y<=290){ alert("Nombre: \nSímbolo: Rf \nÁtomo: \nMasa: \nEstado: \nDescubridor: \nLugar de descubrimiento: \nAño de descubrimiento: ");} else if (x>=180 && x<=210 && y>=140 && y<=170){ alert("Nombre: \nSímbolo: V \nÁtomo: \nMasa: \nEstado: \nDescubridor: \nLugar de descubrimiento: \nAño de descubrimiento: ");} else if (x>=180 && x<=210 && y>=180 && y<=210){ alert("Nombre: \nSímbolo: Nb \nÁtomo: \nMasa: \nEstado: \nDescubridor: \nLugar de descubrimiento: \nAño de descubrimiento: ");} else if (x>=180 && x<=210 && y>=220 && y<=250){ alert("Nombre: \nSímbolo: Ta \nÁtomo: \nMasa: \nEstado: \nDescubridor: \nLugar de descubrimiento: \nAño de descubrimiento: ");} else if (x>=180 && x<=210 && y>=260 && y<=290){ alert("Nombre: \nSímbolo: Db \nÁtomo: \nMasa: \nEstado: \nDescubridor: \nLugar de descubrimiento: \nAño de descubrimiento: ");} else if (x>=220 && x<=250 && y>=140 && y<=170){ alert("Nombre: \nSímbolo: Cr \nÁtomo: \nMasa: \nEstado: \nDescubridor: \nLugar de descubrimiento: \nAño de descubrimiento: ");} else if (x>=220 && x<=250 && y>=180 && y<=210){ alert("Nombre: \nSímbolo: Mo \nÁtomo: \nMasa: \nEstado: \nDescubridor: \nLugar de descubrimiento: \nAño de descubrimiento: ");} else if (x>=220 && x<=250 && y>=220 && y<=250){ alert("Nombre: \nSímbolo: W \nÁtomo: \nMasa: \nEstado: \nDescubridor: \nLugar de descubrimiento: \nAño de descubrimiento: ");} else if (x>=220 && x<=250 && y>=260 && y<=290){ alert("Nombre: \nSímbolo: Sg \nÁtomo: \nMasa: \nEstado: \nDescubridor: \nLugar de descubrimiento: \nAño de descubrimiento: ");} else if (x>=260 && x<=290 && y>=140 && y<=170){ alert("Nombre: \nSímbolo: Mn \nÁtomo: \nMasa: \nEstado: \nDescubridor: \nLugar de descubrimiento: \nAño de descubrimiento: ");} else if (x>=260 && x<=290 && y>=180 && y<=210){ alert("Nombre: \nSímbolo: Tc \nÁtomo: \nMasa: \nEstado: \nDescubridor: \nLugar de descubrimiento: \nAño de descubrimiento: ");} else if (x>=260 && x<=290 && y>=220 && y<=250){ alert("Nombre: \nSímbolo: Re \nÁtomo: \nMasa: \nEstado: \nDescubridor: \nLugar de descubrimiento: \nAño de descubrimiento: ");} else if (x>=260 && x<=290 && y>=260 && y<=290){ alert("Nombre: \nSímbolo: Bh \nÁtomo: \nMasa: \nEstado: \nDescubridor: \nLugar de descubrimiento: \nAño de descubrimiento: ");} else if (x>=300 && x<=330 && y>=140 && y<=170){ alert("Nombre: Hierro \nSímbolo: Fe \nÁtomo: \nMasa: \nEstado: \nDescubridor: \nLugar de descubrimiento: \nAño de descubrimiento: ");} else if (x>=300 && x<=330 && y>=180 && y<=210){ alert("Nombre: \nSímbolo: Ru \nÁtomo: \nMasa: \nEstado: \nDescubridor: \nLugar de descubrimiento: \nAño de descubrimiento: ");} else if (x>=300 && x<=330 && y>=220 && y<=250){ alert("Nombre: Osmio \nSímbolo: Os \nÁtomo: \nMasa: \nEstado: \nDescubridor: \nLugar de descubrimiento: \nAño de descubrimiento: ");} else if (x>=300 && x<=330 && y>=260 && y<=290){ alert("Nombre: \nSímbolo: Hs \nÁtomo: \nMasa: \nEstado: \nDescubridor: \nLugar de descubrimiento: \nAño de descubrimiento: ");} else if (x>=340 && x<=370 && y>=140 && y<=170){ alert("Nombre: \nSímbolo: Co \nÁtomo: \nMasa: \nEstado: \nDescubridor: \nLugar de descubrimiento: \nAño de descubrimiento: ");} else if (x>=340 && x<=370 && y>=180 && y<=210){ alert("Nombre: \nSímbolo: Rh \nÁtomo: \nMasa: \nEstado: \nDescubridor: \nLugar de descubrimiento: \nAño de descubrimiento: ");} else if (x>=340 && x<=370 && y>=220 && y<=250){ alert("Nombre: Iridio \nSímbolo: Ir \nÁtomo: \nMasa: \nEstado: \nDescubridor: \nLugar de descubrimiento: \nAño de descubrimiento: ");} else if (x>=340 && x<=370 && y>=260 && y<=290){ alert("Nombre: \nSímbolo: Mt \nÁtomo: \nMasa: \nEstado: \nDescubridor: \nLugar de descubrimiento: \nAño de descubrimiento: ");} else if (x>=380 && x<=410 && y>=140 && y<=170){ alert("Nombre: Niquel \nSímbolo: Ni \nÁtomo: \nMasa: \nEstado: \nDescubridor: \nLugar de descubrimiento: \nAño de descubrimiento: ");} else if (x>=380 && x<=410 && y>=180 && y<=210){ alert("Nombre: \nSímbolo: Pd \nÁtomo: \nMasa: \nEstado: \nDescubridor: \nLugar de descubrimiento: \nAño de descubrimiento: ");} else if (x>=380 && x<=410 && y>=220 && y<=250){ alert("Nombre: \nSímbolo: Pt \nÁtomo: \nMasa: \nEstado: \nDescubridor: \nLugar de descubrimiento: \nAño de descubrimiento: ");} else if (x>=380 && x<=410 && y>=260 && y<=290){ alert("Nombre: \nSímbolo: Uun \nÁtomo: \nMasa: \nEstado: \nDescubridor: \nLugar de descubrimiento: \nAño de descubrimiento: ");} else if (x>=420 && x<=450 && y>=140 && y<=170){ alert("Nombre: Cobre \nSímbolo: Cu \nÁtomo: \nMasa: \nEstado: \nDescubridor: \nLugar de descubrimiento: \nAño de descubrimiento: ");} else if (x>=420 && x<=450 && y>=180 && y<=210){ alert("Nombre: Plata \nSímbolo: Ag \nÁtomo: \nMasa: \nEstado: \nDescubridor: \nLugar de descubrimiento: \nAño de descubrimiento: ");} else if (x>=420 && x<=450 && y>=220 && y<=250){ alert("Nombre: Oro \nSímbolo: Au \nÁtomo: \nMasa: \nEstado: \nDescubridor: \nLugar de descubrimiento: \nAño de descubrimiento: ");} else if (x>=420 && x<=450 && y>=260 && y<=290){ alert("Nombre: \nSímbolo: Uuu \nÁtomo: \nMasa: \nEstado: \nDescubridor: \nLugar de descubrimiento: \nAño de descubrimiento: ");} else if (x>=460 && x<=490 && y>=140 && y<=170){ alert("Nombre: Zinc \nSímbolo: Zn \nÁtomo: \nMasa: \nEstado: \nDescubridor: \nLugar de descubrimiento: \nAño de descubrimiento: ");} else if (x>=460 && x<=490 && y>=180 && y<=210){ alert("Nombre: Cadmio \nSímbolo: Cd \nÁtomo: \nMasa: \nEstado: \nDescubridor: \nLugar de descubrimiento: \nAño de descubrimiento: ");} else if (x>=460 && x<=490 && y>=220 && y<=250){ alert("Nombre: Mercurio \nSímbolo: Hg \nÁtomo: \nMasa: \nEstado: \nDescubridor: \nLugar de descubrimiento: \nAño de descubrimiento: ");} else if (x>=460 && x<=490 && y>=260 && y<=290){ alert("Nombre: \nSímbolo: Uub \nÁtomo: \nMasa: \nEstado: \nDescubridor: \nLugar de descubrimiento: \nAño de descubrimiento: ");} } // Ventana emergente inicial para mostrar información alert("Todavía no he terminado este proyecto pero si te gusta dale LIKE y comenta.\nSi tienes alguna sugerencia o mejora, coméntalo.\n\n¡¡¡Pasa el ratón por encima de cada elemento o si usas celular/móvil entonces pulsa con el dedo!!!"); alert("TODO EL CÓDIGO Y EL TEXTO LO HICE EN ESPAÑOL, MI IDIOMA NATIVO, POR LO QUE ME GUSTARÍA QUE QUIEN QUIERA HACERME ALGÚN COMENTARIO, LO HAGA EN ESPAÑOL TAMBIÉN, AL IGUAL QUE YO Y OTROS LO HACEMOS USUALMENTE EN INGLÉS, DE ESTE MODO LOS QUE NO HABLAN, ESCRIBEN O LEEN ESPAÑOL, PUEDEN APRENDER UN POCO."); /* Direcciones webs de referencia para la información http://www.quimicaweb.net/tablaperiodica/paginas/tp.htm http://storage.competir.com/post/tabla-periodica-de-los-elementos/Images/tabla-periodica-de-los-elementos-aula365.png https://elreflejoenlaventana.files.wordpress.com/2014/04/tablaperiodica.png https://es.wikipedia.org/wiki/Tabla_periódica_de_los_elementos */

Tabla Periodica