Mengubah Warna Garis di Canvas dengan JavaScript

Sekarang mari kita belajar mengubah warna outline dan isian. Untuk ini, ada properti berikut: properti strokeStyle mengatur warna outline, dan properti fillStyle - warna isian. Warna diatur dalam format CSS yang biasa.

Contoh

Mari kita gambar outline menggunakan rect dan warnainya menjadi merah:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.rect(50, 50, 100, 100);
ctx.strokeStyle = 'red';
ctx.stroke();

Результат:

Contoh

Mari kita gambar sebuah kotak menggunakan rect dan warnainya menjadi hijau:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.rect(50, 50, 100, 100);
ctx.fillStyle = 'green';
ctx.fill();

Результат:

Catatan

Penting: ketika Anda mengatur strokeStyle atau fillStyle, nilai baru akan diterapkan untuk semua bentuk yang akan digambar sejak saat itu. Untuk setiap bentuk, yang mana Anda membutuhkan warna berbeda, Anda harus menimpa nilai fillStyle atau strokeStyle.

Tugas Praktik