TUTORIAL #9 | tag canvas Menggambar Diatas Kanvas

Tag canvas HTML dengan JavaScript

Elemen canvas digunakan untuk menggambar grafik di halaman web.

Tag <canvas> pada HTML 5 digunakan untuk menggambar grafik menggunakanJavaScript.

Elemen <canvas> merupakan tempat untuk menggambar grafik, dimana Anda harus menggunakan bahasa skrip untuk menggambar grafik. Elemen <canvas> akan merender dalam bentuk 2D dan gambar bitmap yang dinamis.

Ada beberapa cara dalam canvas untuk menggambar garis, kotak, lingkaran, teks dan menambahkan gambar.

Koordinat (0,0) mendefinisikan sudut kiri atas kanvas. Parameter (0,0,200,100) digunakan untuk metode fillRect (). Parameter ini akan mengisi persegi panjang mulai dengan sudut kiri atas (0,0) dan menggambar persegi panjang 200 * 100.

Menggambar Garis di Atas Kanvas

Cara untuk menggambar garis lurus di atas kanvas, dapat Anda gunakan dua metode berikut.

moveTo (x, y): Menentukan titik awal garis sudut kiri atas.
lineTo (x, y): Ini digunakan untuk menentukan titik akhir dari baris.

Jika Anda menggambar garis dengan titik awal (0,0) dan titik akhirnya adalah (300,100), gunakan metode ctx.moveTo dan ctx.lineTountuk menggambar garis.

Ketik kode berikut pada HTMLPad

<!DOCTYPE html>
<html>
<body>

    <canvas id="myCanvas" width="300" height="100" style="border:10px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.

    </canvas>

    <script>
      var c = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");
      ctx.moveTo(0,25);
      ctx.lineTo(300,100);
      ctx.stroke();
    </script>

</body>
</html>

Membuat Lingkaran di atas Kanvas

Jika Anda ingin menggambar lingkaran di atas kanvas, Anda dapat menggunakan metode arc ():

Ketik kode berikut pada HTMLPad

<!DOCTYPE html>
<html>
<body>

    <canvas id="myCanvas" width="300" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>

    <script>
        var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
        ctx.beginPath();
        ctx.arc(150,50,30,0,2*Math.PI);
        ctx.stroke();
</script>

</body>
</html>

Membuat teks di atas kanvas

Ada properti dan metode yang digunakan untuk menggambar teks di kanvas.

properti font: Ini digunakan untuk menentukan properti font untuk teks.
fillText (text, x, y) method: Ini digunakan untuk menggambar teks yang terisi di kanvas. Sepertinya font tebal.
strokeText (text, x, y) method: Ini juga digunakan untuk menggambar teks di kanvas, tapi teksnya tidak terisi.

Contoh metode fillText () .

Ketik kode berikut pada HTMLPad

<!DOCTYPE html>
<html>
<body>

    <canvas id="myCanvas" width="400" height="100" style="border:10px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.
    </canvas>

    <script>
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        ctx.font = "50px Arial";
        ctx.fillText("Seno Adjie",75,60);
    </script>

</body>
</html>

Mari kita lihat contoh metode strokeText () .

Latihan berikut sama dengan latihan diatas, membuat teks didalam kotak segiempat. Hanya skript ctx.fillText diganti menjadi ctx.strokeText untuk membuat teks menjadi bolong.

Ketik kode berikut pada HTMLPad

<!DOCTYPE html>
<html>
<body>

    <canvas id="myCanvas" width="400" height="100" style="border:5px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.
    </canvas>

    <script>
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        ctx.font = "50px Roboto";
        ctx.strokeText("Seno Adjie",10,50);
    </script>

</body>
</html>