Thay đổi màu sắc đường thẳng trong canvas bằng JavaScript

Bây giờ hãy học cách thay đổi màu sắc của đường viền và màu tô. Có các thuộc tính sau cho việc này: thuộc tính strokeStyle đặt màu của đường viền, và thuộc tính fillStyle - màu tô. Màu sắc được đặt theo định dạng CSS thông thường.

Ví dụ

Hãy vẽ một đường viền bằng rect và tô nó bằng màu đỏ:

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

Результат:

Ví dụ

Hãy vẽ một hình vuông bằng rect và tô nó bằng màu xanh lá cây:

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

Результат:

Lưu ý

Quan trọng: khi bạn đặt strokeStyle hoặc fillStyle, giá trị mới sẽ được áp dụng cho tất cả các hình sẽ được vẽ từ thời điểm này. Đối với mỗi hình mà bạn cần một màu khác, bạn phải ghi đè giá trị của fillStyle hoặc strokeStyle.

Bài tập thực hành