Căn chỉnh văn bản Canvas HTML
Căn chỉnh văn bản Canvas HTML
Để căn chỉnh văn bản trong canvas, chúng ta sử dụng hai thuộc tính:
-
textBaseline
- xác định đường cơ sở (căn chỉnh dọc) của văn bản -
textAlign
- xác định căn chỉnh ngang của văn bản
Thuộc tính textBaseline
Thuộc tính textBaseline
xác định đường cơ sở (căn chỉnh theo chiều dọc) của văn bản.
Thuộc tính textBaseline
có thể có các giá trị sau:
- "đứng đầu"
- "treo"
- "ở giữa"
- "chữ cái" - đây là mặc định
- "ý thức hệ"
- "đáy"
Ví dụ
Trình diễn các giá trị khác nhau cho thuộc tính textBaseline
:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Create a line
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(0,75);
ctx.lineTo(500,75);
ctx.stroke();
ctx.closePath();
ctx.font = "20px Arial";
ctx.fillStyle = "purple";
ctx.textBaseline
= "top";
ctx.fillText("top", 5, 75);
ctx.textBaseline = "hanging";
ctx.fillText("hanging", 40, 75);
ctx.textBaseline = "middle";
ctx.fillText("middle", 120, 75);
ctx.textBaseline = "alphabetic";
ctx.fillText("alphabetic", 190, 75);
ctx.textBaseline = "ideographic";
ctx.fillText("ideographic", 295, 75);
ctx.textBaseline = "bottom";
ctx.fillText("bottom", 410, 75);
</script>
Hãy tự mình thử » Thuộc tính textAlign
Thuộc tính textAlign
xác định căn chỉnh theo chiều ngang của văn bản.
Thuộc tính textAlign
có thể có các giá trị sau:
- "bên trái"
- "Phải"
- "trung tâm"
- "bắt đầu" - đây là mặc định
- "kết thúc"
Ví dụ
Minh họa các giá trị khác nhau cho thuộc tính textAlign
:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Create a line
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(250,0);
ctx.lineTo(250,250);
ctx.stroke();
ctx.closePath();
ctx.font = "20px Arial";
ctx.fillStyle = "purple";
ctx.textAlign
= "center";
ctx.fillText("center", 250, 20);
ctx.textAlign =
"start";
ctx.fillText("start", 250, 50);
ctx.textAlign = "end";
ctx.fillText("end", 250, 80);
ctx.textAlign = "left";
ctx.fillText("left",
250, 110);
ctx.textAlign = "right";
ctx.fillText("right", 250, 135);
</script>
Hãy tự mình thử »Văn bản ở giữa
Ví dụ
Căn giữa văn bản theo cả chiều dọc và chiều ngang trong khung vẽ:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Verdana";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2);
</script>
Hãy tự mình thử »