Dégradés radiaux avec CANVAS

Le canevas

Le canevas comprend deux parties. Le cercle de gauche est rempli avec un dégradé radial tricolore et le cercle de droite est rempli avec un dégradé radial tricolore également mais avec un cercle rouge de rayon X/8 non dégradé.

Le code de la page

... <style> @media screen and (min-width: 900px) {canvas {width : 80% ; height : 400px; margin : auto;}} @media screen and (max-width: 899px) {canvas {width : 96% ; height : 200px;margin : auto; }} ... <body> ... <canvas></canvas> ... <script> var canevas = document.querySelector("canvas"); var contexte = canevas.getContext('2d'); X = canevas.width; Y =canevas.height; // degradé radial pour le cercle de gauche var degrade1 = contexte.createRadialGradient(X/4,Y/2,0,X/4,Y/2,X/3) ; // dégrade de violet à blanc en passant à rose ; dégradé commence immédiatement degrade1.addColorStop(0,"purple"); degrade1.addColorStop(0.5,"pink"); degrade1.addColorStop(1,"white"); contexte.fillStyle = degrade1; contexte.arc(X/4, Y/2, X/4, 0, Math.PI*2); contexte.fill(); // dégradé radial pour le cercle de droite var degrade2 = contexte.createRadialGradient(X/4*3,Y/2,X/8,X/4*3,Y/2,X/3) ; // dégrade de rouge à blanc en passant par orange ; dégradé différé de 50 degrade2.addColorStop(0,"red"); degrade2.addColorStop(0.5,"orange"); degrade2.addColorStop(1,"white"); contexte.fillStyle = degrade2; contexte.beginPath(); contexte.arc(X/4*3, Y/2, X/4, 0, Math.PI*2); contexte.fill(); ...

CSS : le canevas fait 80% ou 96% de large et 400 ou 200 de haut selon la largeur de l'écran (page "responsive" !)
Utilisation des media queries pour gérer ces dimensions "adaptives". Si cette notion vous est inconnue consultez le tutoriel CSS.

Analyse du script

var degrade 1 = contexte.createRadialGradient(X/4,Y/2,0,X/4,Y/2,300)

var degrade2 = contexte.createRadialGradient(X/4*3,Y/2,50,X/4*3,Y/2,300)

Pour un bon rendu il est souhaitable que les deux cercles aient le même centre. Ce qui est le cas ici pour les deux dégradés radiaux.En effet dans chaque cas le premier paramètre est égal au troisième et le deuxième paramètre est égal au cinquième.

Pour le premier dégradé le rayon du cercle intérieur (troisième paramètre) est 0 ce qui veut dire que la première couleur (purple) se dégrade immédiatement alors que dans le deuxième dégradé la valeur du rayon du centre intérieur est X/8 donc il y a au centre un rond rouge de rayon X/8 uni.
Retour menu