Garis Canvas HTML

实例

// Buat 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();

Coba Sendiri

Penggambaran jalur Canvas

Penggambaran garis menggunakan jalur di atas kanvas:

Metode

Metode beginPath() memulai jalur baru. Dia tidak menggambar apa pun, dia hanya menetapkan jalur baru.

Metode moveTo() menentukan titik awal garis. Dia tidak menggambar apa pun, hanya menetapkan titik awal.

Metode lineTo() menentukan titik akhir garis. Dia tidak menggambar apa pun, hanya menetapkan titik akhir.

Metode stroke() sebenarnya menggambar garis. Warna baku pengecoran adalah hitam.

Properti lineWidth

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

Harus diatur sebelum memanggil metode stroke().

实例

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

Coba Sendiri

Properti strokeStyle

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

Harus diatur sebelum memanggil metode stroke().

实例

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

Coba Sendiri

Properti lineCap

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

Baku adalah square (persegi).

Harus diatur sebelum memanggil metode stroke().

实例

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

Coba Sendiri

Lihat Juga:

Panduan Referensi Lengkap Canvas CodeW3C.com