Explication détaillée des bases de HTML5 Canvas

Qu'est-ce que Canvas ?

Dans la nouvelle norme HTML HTML5, l'élément Canvas est utilisé pour dessiner des graphiques sur des pages Web. La puissance de cette balise d'élément est qu'elle peut effectuer directement des opérations graphiques sur HTML, ce qui a une grande valeur d'application.

La toile est une zone rectangulaire dont vous pouvez contrôler chaque pixel.

Canvas offre plusieurs façons de dessiner des chemins, des rectangles, des cercles, des personnages et d'ajouter des images pour créer de riches références graphiques.

Regardons un morceau de code

<article>
<header>
<meta charset="utf-8">
</header>
    <canvas id="canvas" width="150" height="150"></canvas> 
    <script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "rgb(0,0,200)";
    ctx.fillRect(10, 10, 50, 50);
    </script> 
</article>

Dessinons un rectangle via javascript

Regardons un exemple ci-dessous et dessinons un cercle

<article>
<header>
<meta charset="utf-8">
</header>
    <canvas id="myCanvas" width="200" height="100"></canvas> 
    <script>
        var c=document.getElementById("myCanvas");
        var cxt=c.getContext("2d");
        cxt.fillStyle="#FF0000";
        cxt.beginPath();
        cxt.arc(70,18,15,0,Math.PI*2,true);
        cxt.closePath();
        cxt.fill();
    </script> 
</article>