Penjelasan terperinci tentang Kanvas asas HTML5

Apakah itu Kanvas?

Dalam HTML5 standard HTML baharu, elemen Kanvas digunakan untuk melukis grafik pada halaman web Kekuatan tag elemen ini ialah ia boleh melakukan operasi grafik secara langsung pada HTML, yang mana mempunyai nilai aplikasi yang hebat.

Kanvas ialah kawasan segi empat tepat yang anda boleh mengawal setiap piksel.

kanvas mempunyai pelbagai cara untuk melukis laluan, segi empat tepat, bulatan, aksara dan menambah imej untuk mencipta rujukan grafik yang kaya.

Mari kita lihat sekeping kod

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

Lukis segi empat tepat melalui javascript

Mari lihat contoh di bawah dan lukis bulatan

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