Menukar Warna Garisan dalam Canvas pada JavaScript
Sekarang mari kita belajar menukar warna kontur
dan isian. Untuk ini, terdapat sifat berikut:
sifat strokeStyle menetapkan
warna kontur, dan sifat fillStyle
- warna isian. Warna ditetapkan dalam format
CSS
biasa.
Contoh
Mari kita lukis kontur menggunakan rect
dan warnakannya dengan warna 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 lukis segi empat menggunakan rect
dan warnakannya dengan warna 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();
:
Perhatian
Penting: apabila anda menetapkan strokeStyle
atau fillStyle, nilai baru akan digunakan
untuk semua bentuk yang akan dilukis
dari saat ini. Untuk setiap bentuk yang
memerlukan warna berbeza, anda mesti menulis semula
nilai fillStyle atau strokeStyle.
