lineJoin trong Canvas

Tạo góc tròn giữa 2 dòng kẻ Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5. Code: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 < ! DOCTYPE html > < html > ...

Tạo góc tròn giữa 2 dòng kẻ

Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.

Code:

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" awidth="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.lineJoin = "round";

ctx.moveTo(20, 20);

ctx.lineTo(100, 50);

ctx.lineTo(20, 100);

ctx.stroke();

</script>

</body>

</html>

Demo

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
lineJoin	4.0	2.0	9.0	3.1	9.0

Thuộc tính lineJoin dùng để thiết lập hoặc trả về kiểu của góc được tạo bởi 2 dòng kẻ.

Lưu ý: Giá trị “miter” sẽ bị ảnh hưởng bởi thuộc tính miterLimit.

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

Cú pháp JavaScript: context.lineJoin=”bevel|round|miter”;

Bình luận về bài viết này

Trần Trung Dũng

15 chủ đề

2610 bài viết