Văn bản canvas HTML
Văn bản canvas HTML
Để vẽ văn bản trên khung vẽ, thuộc tính và phương thức quan trọng nhất là:
-
font
- xác định thuộc tính phông chữ cho văn bản -
fillText()
- vẽ văn bản "đã điền" -
strokeText()
- vẽ văn bản "phác thảo" (không điền)
Thuộc tính phông chữ
Thuộc tính font
xác định phông chữ được sử dụng và kích thước của phông chữ.
Giá trị mặc định cho thuộc tính này là "10px sans serif".
Phương thức fillText()
Phương thức fillText()
được sử dụng để vẽ văn bản "đã điền".
Phương thức fillText()
có các tham số sau:
Parameter | Description |
---|---|
text | Required. The text-string to be drawn |
x | Required. The x-coordinate of the start of the string |
y | Required. The y-coordinate of the start of the string |
maxwidth | Optional. The maximum width of the text-string |
Ví dụ
Đặt phông chữ "Arial" thành 50px và viết văn bản đã điền trên khung vẽ. Bắt đầu ở vị trí (10,80):
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "50px Arial";
ctx.fillText("Hello World",10,80);
</script>
Hãy tự mình thử » Phương thức StrokeText()
Phương thức strokeText()
được sử dụng để vẽ văn bản "có đường viền".
Phương thức strokeText()
có các tham số sau:
Parameter | Description |
---|---|
text | Required. The text-string to be drawn |
x | Required. The x-coordinate of the start of the string |
y | Required. The y-coordinate of the start of the string |
maxwidth | Optional. The maximum width of the text-string |
Ví dụ
Đặt phông chữ thành 50px "Arial" và viết văn bản có đường viền trên khung vẽ. Bắt đầu ở vị trí (10,80):
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "50px Arial";
ctx.strokeText("Hello World",10,80);
</script>
Hãy tự mình thử »Ví dụ
Thêm đậm và in nghiêng cho phông chữ:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "bold italic 50px Arial";
ctx.strokeText("Hello World",10,80);
</script>
Hãy tự mình thử »