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 đỏ:
<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();
:
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:
<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();
:
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.
