Méthode : CanvasRenderingContext2D.fill()

<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var myCanvas=document.getElementById("myCanvas");
var myContext=myCanvas.getContext("2d");

myContext.beginPath();
myContext.moveTo(10,10);
for (var i=1; i<=4; i++) {
var x=parseInt(300*Math.random());
var y=parseInt(150*Math.random());
console.log("Point : "+x+" , "+y);
myContext.lineTo(x, y);
}
myContext.fill();

</script>

Emulation de la console

Crée une forme aléatoire et la remplit avec fill().

<canvas id="myCanvas2" width="350" height="200"></canvas>
<script type="text/javascript">
var myCanvas2=document.getElementById("myCanvas2");
var myContext=myCanvas2.getContext("2d");

/* Remplissage d'un arc de cercle */
myContext.arc(65, 75, 60, 0, 5*Math.PI/4);
myContext.fill();

/* Remplissage d'un arc de cercle en repassant par le centre */
myContext.beginPath();
myContext.arc(200, 75, 60, 0, 5*Math.PI/4);
myContext.lineTo(200,75);
myContext.fill();
myContext.stroke();
</script>

Emulation de la console

Comparaison de remplissages d'arc de cercle direct ou en repassant par le centre.

Dunod Fnac Amazon

Chargement
en cours...