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:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let 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:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let 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.
