HTML5 CANVASDégradés
Canvas avec des dégradés de couleur
Pour réaliser des dégradés, on utilise soit :
<canvas id="monCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script type="text/javascript">
var c = document.getElementById(" monCanvas ");
var ctx=c.getContext('2d');
var gradient = ctx.createLinearGradient(50,50,250,250);
gradient.addColorStop(0,"blue"); // Départ
gradient.addColorStop(0.8,"yellow"); // Intermédiaire
gradient.addColorStop(1,"green"); // Arrivée
ctx.fillStyle = gradient; // Affectation au remplissage
ctx.fillRect(0,0,c.width,c.height);
<:/script>
Pour aller plus loin...
- les dégradés linéaire (createLinearGradient) le long d'un axe
- les dégradés radial (createRadialGradient) avec un centre et une extension circulaire
<canvas id="monCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script type="text/javascript">
var c = document.getElementById(" monCanvas ");
var ctx=c.getContext('2d');
var gradient = ctx.createLinearGradient(50,50,250,250);
gradient.addColorStop(0,"blue"); // Départ
gradient.addColorStop(0.8,"yellow"); // Intermédiaire
gradient.addColorStop(1,"green"); // Arrivée
ctx.fillStyle = gradient; // Affectation au remplissage
ctx.fillRect(0,0,c.width,c.height);
<:/script>
Pour aller plus loin...
