Membuat Garis dan Polygon ~ Pemrograman dan Teknologi

Untuk membuat garis kita bisa menggunakan moveTo dan lineTo yang diapit dengan beginPath dan stroke. Misal :

<HTML>
<HEAD>
</HEAD>
<BODY>
    <Canvas width="400" height="400" id="kanvas" style="background-color:red;">
        Tidak bisa menampilkan kanvas
    </Canvas> 
    <Script>
        var kanvas=document.getElementById("kanvas");
        var ct=kanvas.getContext("2d");
        ct.strokeStyle="yellow";
        ct.lineWidth=3;
        ct.beginPath();
            ct.moveTo(100, 100);
            ct.lineTo(200, 200);
            ct.lineTo(100, 200);
            ct.lineTo(100, 100);
        ct.stroke();
    </Script>
</BODY>
</HTML>

Properti strokeStyle bisa digunakan untuk menentukan warna garis. Jika kita ingin mengubah ketebalan garisnya kita mengubah nilai lineWidth. Method moveTo digunakan untuk memindahkan titik awal sebelum membuat garis baru dengan lineTo. Setelah selesai menentukan posisi masing-masing titik, kita harus menggunakan stroke untuk menentukan garis.

Untuk memberi warna ditengah bangun yang terbentuk, kita bisa menggunakan fill(). Tapi, sebelumnya kita perlu menentukan warnanya dengan fillStyle. Untuk mencoba apa yang sudah saya sebutkan sebelumnya, ubah script dalam kode HTML di atas jadi seperti di bawah ini.

var kanvas=document.getElementById("kanvas");
var ct=kanvas.getContext("2d");
ct.strokeStyle="yellow";
ct.fillStyle="green";
ct.lineWidth=3;
ct.beginPath();
        ct.moveTo(100, 100);
        ct.lineTo(200, 200);
        ct.lineTo(100, 200);
        ct.lineTo(100, 100);
ct.fill();
ct.stroke();

Untuk memahami scriptnya, coba lihat bagian mana yang berubah. Kalau kalian sudah memahami kegunaan tiap bagian script, mengubahnya adalah hal yang mudah.

Mengubah Ujung Garis

Kita bisa mengubah ujung garis dengan properti lineCap. Nilai dari lineCap bisa berupa satu dari 3 nilai berikut ini.

round
butt
square

Perbedaannya bisa kalian lihat sendiri dengan menerapkannya dalam script.

var kanvas=document.getElementById("kanvas");
var ct=kanvas.getContext("2d");
ct.strokeStyle="yellow";
ct.fillStyle="red";
ct.lineWidth=10;

ct.lineCap="round";
ct.beginPath();
 ct.moveTo(100, 100);
 ct.lineTo(200, 200);
ct.stroke();

ct.lineCap="butt";
ct.beginPath();
 ct.moveTo(100, 200);
 ct.lineTo(200, 300);
ct.stroke();

Tanpa perlu saya jelaskan panjang lebar, kalian seharusnya sudah bisa membedakan sendiri bentuk ujung dari dua garis yang ditampilkan script di atas. Bentuk ujung kedua garis tersebut dipengaruhi oleh nilai properti lineCap.