font trong Canvas

Chữ có kích cỡ 30px trong canvas sử dụng font Arial: 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 < ! DOCTYPE html > < html ...

Chữ có kích cỡ 30px trong canvas sử dụng font Arial:

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.font = "30px Arial";

ctx.fillText("Hello World", 10, 50);

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

Thuộc tính font được sử dụng để thiết lập hoặc trả về các thuộc tính cho chữ nội dung trong canvas.

Thuộc tính font sử dụng cú pháp tương tự như thuộc tính font trong CSS.

Giá trị mặc định: 10px sans-serif

Cú pháp JavaScript: context.font=”italic small-caps bold 12px arial”;

Giá trị	Miêu tả
font-style	Kiểu font. Các giá trị có thể sử dụng: normal italic oblique
font-variant	Biến thể của font. Các giá trị có thể sử dụng: normal small-caps
font-weight	Độ đậm của chữ. Các giá trị có thể sử dụng: normal bold bolder lighter 100 200 300 400 500 600 700 800 900
font-size/line-height	Cỡ chữ và chiều cao dòng, đơn vị là pixel
font-family	Tên của font
caption	Font được sử dụng để chú thích các control (như các nút, menu trải xuống, vv.)
icon	Font được sử dụng cho nhãn các biểu tượng
menu	Font được sử dụng trong menus (menu trải xuống và menu liệt kê)
message-box	Font được sử dụng cho hộp thoại
small-caption	Font được sử dụng cho nhãn nhưng control nhỏ
status-bar	Font được sử dụng trong thanh trạng thái của window

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

Vũ Văn Thanh

12 chủ đề

2597 bài viết