lineCap trong Canvas

Có 3 kiểu mũ cho dòng kẻ :

Code:

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.</canvas>

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.beginPath();

ctx.lineWidth = 10;

ctx.lineCap = "butt";

ctx.moveTo(20, 20);

ctx.lineTo(200, 20);

ctx.stroke();

ctx.beginPath();

ctx.lineCap = "round";

ctx.moveTo(20, 40);

ctx.lineTo(200, 40);

ctx.stroke();

ctx.beginPath();

ctx.lineCap = "square";

ctx.moveTo(20, 60);

ctx.lineTo(200, 60);

ctx.stroke();

</script>

</body>

</html>

Số trong bảng dưới đây thể hiện phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ cho thuộc tính.

Thuộc tính
lineCap	4.0	2.0	9.0	3.1	9.0

Thuộc tính lineCap dùng để thiết lập hoặc trả về kiểu mũ cho 2 đầu dòng kẻ.

Lưu ý: Giá trị “round” và “square” sẽ làm cho dòng kẻ hơi dài hơn.

Giá trị mặc định: butt

Cú pháp JavaScript: context.lineCap=”butt|round|square”;

Giá trị	Miêu tả
butt	Mặc định. 2 đầu của đường thẳng sẽ là cạnh phẳng
round	Thêm mũ tròn vào 2 đầu của đường thẳng.
square	Thêm mũ vuông vào 2 đầu của đường thẳng.

WebVN Cộng đồng web Việt Nam