Accueil

Traduction

Tutoriel Canvas - sommaire

Sommaire partiellement masqué - faites défiler !

Tutoriel Canvas - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

Deux animations avec effet 3D

Un canevas est un contexte 2D mais en ombrant les formes on peut donner un effet 3D.

Déplacement automatiquement une boule sur un billard

Le canevas ( un billard)

La boule se déplace sur le billard ; le billard et la boule sont ombrées : effet 3D.

Le code correspondant

Le code HTML :

La balise CANVAS est un élément HTML, on peut donc lui appliquer la propriété CSS box-shadow.

Le script :

Par contre pour ombrer une forme du canevas il faut utiliser les quatre propriétés "shadow".

La fonction boule est appelée toutes les 50 millisecondes donc 20 fois par seconde (1000/50).

Une bannière animée avec Canvas

Une bonne révision sur toutes les méthodes pour dessiner du texte dans un canevas.

La bannière

Le code correspondant

Code HTML :

Le script :

Pour pouvoir utilise les mêmes noms de variables que dans le premier script, je crée une fonction dans celui-ci.