Canvas : courbe de Bézier animée

Le canevas

Le code de la page

La feuille de style interne

... @media screen and (min-width: 900px) {canvas {width : 600px ; height : 300px; }} @media screen and (max-width: 899px) {canvas {width : 300px ; height : 150px; }} ...

Le CANVAS fait 600 ou 300 de large et 300 ou 150 pixels de haut selon la largeur de l'écran.

Le code HTML

<canvas></canvas>

On ne peut plus simple ...

Le script

var canevas = document.querySelector('canvas'); var contexte = canevas.getContext('2d'); var X = canevas.width ; var Y = canevas.height; alert("dimensions canevas : "+ X + " " + Y + " "+ typeof(X)) ; var i = 0; // variable fonction du temps var sens = 1 ; setInterval(animate,50); function animate() { contexte.clearRect(0,0,X,Y); var y = Math.abs(Y -i) ; // y : ordonnée du point de départ et d'arrivée de la courbe // avec la fonction abs : y est toujours positif contexte.beginPath(); contexte.moveTo(0, y); // ordonnée du point d'origine est y contexte.bezierCurveTo(X/3, 0, 2*X/3, Y, X, y); // les coordonnées des points aimants ne changent pas contexte.lineWidth = '2' ; contexte.stroke(); if (i==Y) sens = -1; if (i==0) sens = 1 ; i = i +sens ; } // fin fonction animate ...

Il y a dans le script j'ai inséré une instruction alert() qui retourne "dimensions canevas : 300 150 number" quelque soient les dimensions réelles du canevas (600 sur 300 ou 300 par 150).

Les coordonnées des points d'inflexion ne changent pas ainsi que les abscisses des points de départ et d'arrivée.
Ce qui change ce sont les ordonnées du point de départ et du point d'arrivée qui sont désignées par la variable y.
La valeur de y est égal à la valeur absolue de (Y - i). Donc y est toujours positif !
La variable i est tantôt incrémentée et tantôt décrémentée via la variable sens qui tantôt vaut 1 et tantôt -1.


Retour menu