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:

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 lukis segi empat menggunakan rect dan warnakannya dengan warna 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();

Результат:

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.

Tugas Praktikal