Retourner à la page d'accueil de TJS

Script globalalpha : Transparence et opacité dans un canvas

Edition 2 | Chapitre 20 : Le dessin et les canvas / Page 282

Exécution du script

Emulation de la console

Code source

<html><head><title>globalAlpha : opacité et transparence dans les canvas</title></head><body><h1>Opacité et transparence dans un canvas</h1><div class="dessin">  <canvas id="myCanvas" width="300" height="300" style="background: #316AC5;"></canvas></div><script type="text/javascript">var myCanvas=document.querySelector("#myCanvas");var myContext=myCanvas.getContext("2d");    /* Affichage du texte incliné */myContext.font="italic bold 42px helvetica";myContext.fillStyle="#FFA500";myContext.rotate(-Math.PI/7);myContext.fillText("Tout JavaScript", -96, 230);myContext.rotate(Math.PI/7);/* Affichage des cercles en transparence */for (var i=0; i<30; i++) {  /* Noir avec opacity variant de 0,3 à 0 */  myContext.globalAlpha=(30-i)/100;  myContext.fillStyle="#000";  myContext.beginPath()  myContext.arc(0, 0, 11*i, 0, 2*Math.PI);    myContext.fill();    /* Blanc avec opacity variant de 0,15 à 0 */  myContext.globalAlpha=(15-0.5*i)/100;  myContext.fillStyle="#fff";  myContext.beginPath();  myContext.arc(300, 300, 11*i, 0, 2*Math.PI);    myContext.fill();}    </script><style type="text/css">  div.dessin {    background: #fff;    padding:5px;      text-align: center;  }</style></body></html>

Nouvelle édition Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 21 octobre

Version papier à 29€90
Format électronique à 22€99.

Commandez en ligne

Chercher une fonction, un objet, ...

Le graph des objets JavaScript



Chargement
en cours...
Le 24/07/2021 21:41:33 sur php7 en 50.86 ms