¿Qué tan rápido puedo aprender html5 lienzo desde cero?

Answer 1

Este video es, con mucho, la forma más rápida de aprender lienzo. O al menos empezar a hacerlo. En 3 minutos aprende a construir un sistema de partículas.

En 3 minutos aprenderás:

Cómo usar fillRect () para dibujar un cuadrado
Como posicionarlo
Como colorearlo
Cómo crear una función y llamarla después de un intervalo de tiempo
Cómo establecer variables para cambiar las propiedades y valores del cuadrado.
Cómo animar su movimiento.
Cómo agrupar todas las propiedades del cuadrado en un objeto JavaScript
Cómo hacer una matriz para almacenar y agregar múltiples cuadrados
Cómo hacer un bucle para crear muchos cuadrados.
Cómo aplicar algunos cálculos matemáticos para reducirlos y hacer que vayan a donde quieras.

Sin duda uno de los mejores tutoriales que he visto. Todo lo básico de JavaScript en 3 minutos.

Obviamente, hay más en ello, por ejemplo, ese ejemplo sigue haciendo pequeños cuadrados, agregando a la matriz y haciendo un seguimiento de todos ellos, incluso cuando han volado fuera de la pantalla. Lea los comentarios en el enlace para obtener más información sobre cómo solucionarlo.

He aquí un código que hice, agregando la función randomRange que necesitarás, arreglando la pérdida de memoria, además de hacer los cuadrados en círculos y agregando un script de color al azar.

wGpVPR

Answer 2

Es tan simple como a, b, c

var a = document.getElementById (‘canvas-id’);
var b = a.getContext (‘2d’);
b.lineTo (10, 10);
b.strokeStyle = ‘azul’;
b.stroke ();
// ¿Qué tan fácil es?

No, pero con toda seriedad, HTML5 Canvas es bastante fácil de aprender. W3Schools tiene un tutorial bastante bueno: HTML5 Canvas, pero puedes encontrarlos en toda la web.