Buscar un código de JavaScript

Mostrando del 21 al 30 de 43 coincidencias
Se ha buscado por la cadena: canvas
Imágen de perfil

Dibujar con HTML 5 y Canvas


JavaScript

estrellaestrellaestrellaestrellaestrella(2)
Publicado el 4 de Octubre del 2015 por Guajardo (21 códigos)
4.401 visualizaciones desde el 4 de Octubre del 2015
linea de códigos de html5, con la cual dibujo el logo de gmail. espero sea ayuda, fue una tarea que tuve hace rato y ahora la comparto con ustedes, espero les sea útil y se vayan imaginado lo potente que en es html5 con canvas.
Imágen de perfil
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Gráfico de lineas con Canvas,leyenda y tooltip


JavaScript

estrellaestrellaestrellaestrellaestrella(3)
Actualizado el 19 de Febrero del 2019 por Xve (294 códigos) (Publicado el 29 de Enero del 2019)
6.123 visualizaciones desde el 29 de Enero del 2019
Este código utiliza un objeto para crear gráficos de lineas con su leyenda y tooltip al pasar el ratón por encima de cada valor.

Permite especificar si la linea dispone de puntos y tooltip. También puedes especificar si se muestran los valores del eje horizontal, leyenda o titulo.

En esta segunda versión, se permite especificar:
- si se quiere que el gráfico empiece desde 0 o desde el valor mas bajo.
- para cada rango de valores se permite especificar un color diferente para las rallas que suben o bajan.
- si se desean visualizar las redondas en cada intersección
- si quieres o no visualizar el tooltip
- invertir el orden de las coordenadas Y

El tooltip, leyenda y intersección, son clases externas, por lo que se pueden añadir nuevos objetos y utilizarlos dentro del gráfico.

grafico2

grafico1
sin imagen de perfil

Triangulo rectangulo editable con canvas


JavaScript

estrellaestrellaestrellaestrellaestrella(2)
Actualizado el 17 de Marzo del 2018 por Anonymous (35 códigos) (Publicado el 18 de Agosto del 2016)
16.277 visualizaciones desde el 18 de Agosto del 2016
El código lo que hace es dibujar un triángulo rectángulo con las medidas que le has dado (pixeles). Además de otras funciones: dibujar, limpiar y descargar.

Captura
Imágen de perfil
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Juego de la serpiente (snake) en javascript


JavaScript

estrellaestrellaestrellaestrellaestrella(2)
Actualizado el 22 de Abril del 2020 por Joel (150 códigos) (Publicado el 11 de Abril del 2020)
10.029 visualizaciones desde el 11 de Abril del 2020
Típico juego de la serpiente desarrollado con HTML, CSS y JavaScript sin utilizar canvas.
Cada vez que la serpiente se come una manzana va aumentando el tamaño de la cola y va aumentando la velocidad de movimiento.

snake
Imágen de perfil

Creación y resolución de un laberinto


JavaScript

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 3 de Junio del 2019 por Administrador (718 códigos)
9.663 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