Garis Canvas HTML

实例

// Membuat kanvas:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Tentukan jalur baru:
ctx.beginPath();
// Tentukan titik awal:
ctx.moveTo(0, 0);
// Tentukan titik akhir:
ctx.lineTo(200, 100);
// Menggambar:
ctx.stroke();

Cuba Sendiri

Penggambar Garis Kanvas

Menggambar garis menggunakan jalur di atas kanvas:

Method

Method beginPath() memulai jalur baru. Ia tidak menggambar apa-apa, ia hanya menentukan jalur baru.

Method moveTo() menentukan titik awal garis. Ia tidak menggambar apa-apa, ia hanya menetapkan titik awal.

Method lineTo() menentukan titik akhir garis. Ia tidak menggambar apa-apa, ia hanya menetapkan titik akhir.

Method stroke() secara sebenarnya menggambar garis. Warna lalai pengecoran adalah hitam.

Property lineWidth

Property lineWidth menentukan lebar garis yang digunakan untuk menggambar di atas kanvas.

Wajib diatur sebelum dipanggil method stroke().

实例

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.stroke();

Cuba Sendiri

Property strokeStyle

Property strokeStyle menentukan gaya yang digunakan untuk menggambar di atas kanvas.

Wajib diatur sebelum dipanggil method stroke().

实例

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.strokeStyle = "red";
ctx.stroke();

Cuba Sendiri

Property lineCap

Property lineCap menentukan gaya ujung garis (butt, round atau square).

Lalai adalah square ( persegi ).

Wajib diatur sebelum dipanggil method stroke().

实例

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(175,75);
ctx.lineWidth = 10;
ctx.lineCap = "round";
ctx.stroke();

Cuba Sendiri

Lihat Juga:

Panduan Rujukan Lengkap Canvas CodeW3C.com