Mostrar los tags: canvas

Mostrando del 1 al 10 de 42 coincidencias
<<>>
Se ha buscado por el tag: canvas
Imágen de perfil

Paint en Canvas JS


JavaScript

estrellaestrellaestrellaestrellaestrella(11)
Actualizado el 21 de Abril del 2020 por Humberto (35 códigos) (Publicado el 10 de Octubre del 2017)
8.690 visualizaciones desde el 10 de Octubre del 2017
Es una beta del paint para canvas que incluye varias herramientas que te servirán para el dibujo básico

Captura-de-pantalla-66
Imágen de perfil

Animación canvas Montañas con estrellas


JavaScript

estrellaestrellaestrellaestrellaestrella(2)
Actualizado el 21 de Abril del 2020 por Humberto (35 códigos) (Publicado el 13 de Agosto del 2018)
1.727 visualizaciones desde el 13 de Agosto del 2018
En este código vemos como hay unas montañas, una luna y estrellas estas últimas rotando

fondo-estrellado
Imágen de perfil

Descargar Imagen de canvas


JavaScript

estrellaestrellaestrellaestrellaestrella(1)
Actualizado el 20 de Abril del 2020 por Humberto (35 códigos) (Publicado el 17 de Octubre del 2017)
6.868 visualizaciones desde el 17 de Octubre del 2017
Este script descarga la imagen de un canvas y te da opciones de guardado
Imágen de perfil

Juego de la serpiente canvas(beta)


JavaScript

Actualizado el 20 de Abril del 2020 por Humberto (35 códigos) (Publicado el 11 de Marzo del 2018)
1.743 visualizaciones desde el 11 de Marzo del 2018
Juego de la serpiente, por ahora solo se anima el cubo

descarga
Imágen de perfil

Flappy Bird en Canvas js


JavaScript

estrellaestrellaestrellaestrellaestrella(2)
Actualizado el 20 de Abril del 2020 por Humberto (35 códigos) (Publicado el 27 de Agosto del 2018)
3.366 visualizaciones desde el 27 de Agosto del 2018
El clásico juego de flappy Bird desde javascript y canvas

Captura-de-pantalla-283
Imágen de perfil

Dibujar en Javascript con Canvas


JavaScript

Publicado el 9 de Enero del 2020 por Ana Zelideth (29 códigos)
574 visualizaciones desde el 9 de Enero del 2020
Buen día les comparto un ejemplo de como hacer círculos y un pino en Javascript con canvas.

arbol-navidad-canvas
Imágen de perfil

Obtener el color de una imagen cargada en un canvas


JavaScript

Publicado el 21 de Noviembre del 2019 por Xve (293 códigos)
1.156 visualizaciones desde el 21 de Noviembre del 2019
Código que muestra como cargar una imagen local en un canvas y obtener el color de cualquier punto de la imagen en formato RGB y hexadecimal.

canvas-color
Imágen de perfil

Creación y resolución de un laberinto


JavaScript

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 3 de Junio del 2019 por Administrador (703 códigos)
3.485 visualizaciones desde el 3 de Junio del 2019
- Toda la programación está hecha en JavaScript.
- La visualización de los laberintos se basa en el elemento canvas de HTML5. Para los símbolos uso imágenes de 16×16 píxeles y para mostrar la solución uso círculos y rectángulos dibujados.
- La generación de laberintos se hace por backtracking y se obtiene un laberinto perfecto: cualesquiera dos puntos están conectados por exactamente un camino y no hay bucles. Lo elegí porque visualmente me pareció más atractivo.
- La salida (el cohete) y la llegada (la casita) las elijo para que estén lo más separadas posible, para conseguir que la solución sea un camino largo. En algunas ocasiones la curva resultante me recuerda a la curva de Peano.
- La solución del laberinto se obtiene buscando los puntos muertos, celdas que están rodeadas de tres muros; cuando se eliminan todos, las celdas que quedan son las que forman la solución. También me pareció más adecuada para su visualización.
- Para mostrar la solución utilizo un temporizador JavaScript ¡para cada paso! Nunca pensé que eso podría funcionar. Con la inocencia del novato, pensé en usar el equivalente en JavaScript a una función sleep() hasta que descubrí que ni existía ni se consideraba correcto escribirla, por lo que tuve que pensar un buen rato cómo conseguir lo que quería con temporizadores. Bueno, parece que funciona :)

laberinto

laberinto-resuelto
Imágen de perfil

Deshacer cambios en un canvas


JavaScript

Publicado el 11 de Febrero del 2019 por Joan (98 códigos)
1.196 visualizaciones desde el 11 de Febrero del 2019
Ejemplo de como deshacer una modificación en un canvas

Espero que sirva
Imágen de perfil

Gráfico de barras con Canvas, leyenda y tooltip


JavaScript

estrellaestrellaestrellaestrellaestrella(2)
Actualizado el 24 de Enero del 2019 por Xve (293 códigos) (Publicado el 24 de Octubre del 2018)
5.977 visualizaciones desde el 24 de Octubre del 2018
Este código utiliza un objeto para crear gráficos de barras con su leyenda y tooltip al pasar el ratón por encima.

grafico-barras-canvas
Anterior12345Siguiente