Thay đổi kích thước đường kẻ trong canvas bằng JavaScript
Độ dày của đường kẻ được thiết lập thông qua thuộc tính
lineWidth. Chỉ cần gán cho nó một giá trị độ dày,
ví dụ như sau: lineWidth = 5 - sẽ tạo ra
đường kẻ có độ dày 5px. Hãy xem ví dụ:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.lineWidth = 5; // độ dày 5px
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.stroke();
:
Độ dày cũng có thể thay đổi cho các đường viền,
ví dụ như được vẽ bằng rect:
<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.lineWidth = 5;
ctx.stroke();
:
