Script globalalpha : Transparence et opacité dans un canvas

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

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

<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>

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>

Troisième édition Tout JavaScript chez Dunod

En savoir plus
Sortie le 4 janvier 2023

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

Commandez en ligne

Dunod Fnac Amazon

Le graph des objets JavaScript

Chargement
en cours...