Mostrar los tags: canvas

Mostrando del 21 al 30 de 41 coincidencias
Se ha buscado por el tag: canvas
sin imagen de perfil

'librería' canvas JavaScript


JavaScript

estrellaestrellaestrellaestrellaestrella(4)
Actualizado el 17 de Marzo del 2018 por Anonymous (35 códigos) (Publicado el 4 de Noviembre del 2017)
3.344 visualizaciones desde el 4 de Noviembre del 2017
Crea botones para descargar el lienzo fácilmente y has círculos como si de cuadros se tratase.
para descargar el canvas tan solo como poner el contexto del canvas deseado junto con el método download():
1
2
3
4
5
6
7
8
9
window.onload = function(){
	var c = document.getElementById("lienzo");
	var ctx = c.getContext('2d');
 
	document.getElementById('descargar').onclick = function(){
		ctx.download();
	};
};
<input type="button" id="descargar" value="descargar">
lo mejor de este es que la variable del contexto no es siempre ctx, ya depende de la que tu pongas la libreria se encarga de eso.

Este lanzara un prompt que pedirá un nombre para el archivo y si le das en aceptar sin poner nombre pondrá "Sin título" con la extensión .png por defecto.

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

Crear los barcos para el juego de Guerra de barcos


JavaScript

estrellaestrellaestrellaestrellaestrella(4)
Publicado el 13 de Enero del 2018 por Xve (294 códigos)
7.984 visualizaciones desde el 13 de Enero del 2018
Código que genera un array bidimensional donde pone los barcos necesarios para jugar al juego de Guerra de barcos y muestra su posición en la pantalla utilizando canvas.

guerra-de-barcos


Los barcos no se pueden tocar en la cuadricula.
Los tipos de barcos a utilizar en el juego son:
- 1 de 4 posiciones
- 2 de 3 posiciones
- 3 de 2 posiciones
- 4 de 1 posición

Muy agradecido a mi amigo Kip por su ayuda en el desarrollo!!!
Imágen de perfil

Juego de memoria (Memorama)


JavaScript

estrellaestrellaestrellaestrellaestrella(13)
Actualizado el 25 de Noviembre del 2017 por Alejandro (9 códigos) (Publicado el 25 de Febrero del 2017)
46.990 visualizaciones desde el 25 de Febrero del 2017
Hice modificaciones a un código que saque de un libro ya que:
1.- Las cartas no siempre generaban pares
2.- Podía voltear mas de 2 cartas sin cubrirlas
3.- Cuando se terminaban las cartas quedaba el fondo

Así que las cartas ya siempre son en pares y limita a descubrir solo 2.
Al terminar las cartas dice "juego terminado" y al clickar comienza uno nuevo.

Es muy sencillo pero es base para desarrollos mas complejos, si tengo oportunidad luego lo publico con imágenes jeje

memorama

memorama11
Imágen de perfil

Juego de la vida - Canvas (No óptimo)


JavaScript

estrellaestrellaestrellaestrellaestrella(5)
Actualizado el 18 de Octubre del 2017 por Kip (28 códigos) (Publicado el 28 de Septiembre del 2017)
5.297 visualizaciones desde el 28 de Septiembre del 2017
El viejo y conocido 'Juego de la vida' de John Conway en canvas usando un algoritmo simple pero no óptimo.

El algoritmo funciona bien cuando el canvas tiene un tamaño menor a 600 x 600, baja el rendimiento cuando existen muchas células vivas en este, claro que se puede mejorar pero por ahora asi es como quedara.

Screenshot_614

Screenshot_615

Puedes crear las células aleatoriamente o directamente haciendo clic.
Imágen de perfil

Efecto Matrix (Canvas)


JavaScript

estrellaestrellaestrellaestrellaestrella(3)
Publicado el 16 de Octubre del 2017 por Kip (28 códigos)
15.719 visualizaciones desde el 16 de Octubre del 2017
Un primer intento del efecto de la lluvia de código de la película Matrix, siendo posible colocar algunos parametros y personalizarlo a nuestro gusto, a continuacion unos ejemplos:

El conocido fondo negro con letras verdes:

1
2
3
matrixRain({
    canvas: '#my-canvas',
}).run();

Screenshot_619

Si queremos algo diferente, por ejemplo algo parecido a la consola de powershell:

1
2
3
4
5
matrixRain({
    background: '#00275D',
    color: '#ffffff',
    canvas: '#my-canvas',
}).run();

Screenshot_620

Podriamos tambien aumentarle el tamaño de fuente y colocar una velocidad mucho mas lenta, en este caso 500ms

1
2
3
4
5
matrixRain({
    canvas: '#my-canvas',
    fontSize: 20,
    speed: 500
}).run();

Screenshot_621

Por ultimo podriamos hacer que en lugar de que el contenido sean números, que es el contenido por defecto, sean letras chinas, para que se vea algo mas 'Matrix':

1
2
3
4
matrixRain({
    canvas: '#my-canvas',
    content: "田由甲申甴电甶男甸甹町画甼甽甾甿畀畁畂畃畄畅畆畇畈畉畊畋界畍畎畏畐畑".split("")
}).run();

Screenshot_622

Recordar que siempre la propiedad content debera ser un array.

Esto es una simple experimentación, el código es posible optimizarlo y mejorarlo en ciertos aspectos para agregar mas detalles como un color inicial o controlar el degradado sin usar un estilo global con 'rgba()'.....
Imágen de perfil

Gráfico de pastel con cavas en HTML5


JavaScript

estrellaestrellaestrellaestrellaestrella(6)
Publicado el 17 de Julio del 2017 por Xve (294 códigos)
23.477 visualizaciones desde el 17 de Julio del 2017
En este código he creado una clase de javascript para generar gráficas de pastel

grafico-pastel


Se puede definir si se desea en formato "donut", si mostramos el tanto por ciento y si mostramos la leyenda.