Mostrar los tags: canvas

Mostrando del 1 al 10 de 41 coincidencias
<<>>
Se ha buscado por el tag: 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
457 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

Publicado el 3 de Junio del 2019 por Administrador
1.197 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
526 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 (Publicado el 24 de Octubre del 2018)
3.157 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
Imágen de perfil

Enviar firma al servidor desde Tablet o smartphone


JavaScript

estrellaestrellaestrellaestrellaestrella(2)
Publicado el 17 de Octubre del 2018 por xve
1.098 visualizaciones desde el 17 de Octubre del 2018
El código permite que un usuario mediante tablet o smartphone realice una firma y esta se guarde en el servidor como un archivo .png y se guarde un registro en la base de datos con el numero, nombre del usuario y nombre de la imagen.

firmarTablet


Este código es una actualización del código de Marcelo Agustini llevado a HTML5 con $mysqli.
Imágen de perfil

Dibujar circunferencias y rectangulos en un Canvas


Python

Publicado el 12 de Octubre del 2018 por Administrador
1.399 visualizaciones desde el 12 de Octubre del 2018
Este código muestra como dibujar circulos y rectangulos con el raton en un Canvas

python-canvas
Imágen de perfil

Canvas dentro de un frame con Tkinter


Python

Publicado el 11 de Octubre del 2018 por Administrador
2.475 visualizaciones desde el 11 de Octubre del 2018
Este simple código muestra como utilizar un canvas dentro de un Frame y crear unos circulos y un texto.

tk-frame-canvas
Imágen de perfil

Flappy Bird en Canvas js


JavaScript

estrellaestrellaestrellaestrellaestrella(2)
Actualizado el 5 de Septiembre del 2018 por Humberto (Publicado el 27 de Agosto del 2018)
2.214 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

canvas en pantalla completa


JavaScript

estrellaestrellaestrellaestrellaestrella(4)
Actualizado el 18 de Agosto del 2018 por Humberto (Publicado el 20 de Agosto del 2016)
3.271 visualizaciones desde el 20 de Agosto del 2016
el código lo que hace es ponerte la pantalla de canvas a pantalla completa de el navegador
nota:quiero agregar que el código no es mio solamente es que lo quiero compartir con ustedes para que no batallen en la creación de sus juegos xd
Captura-de-pantalla-26
Imágen de perfil

Prueba canvas fullscreen


JavaScript

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 13 de Agosto del 2018 por Humberto
839 visualizaciones desde el 13 de Agosto del 2018
Código para adaptar el canvas a pantalla completa
Anterior12345Siguiente