HTML canvas textAlign 属性

实例

创建一个位于 150 位置的红色线条。150 位置是下方所有文本定义的锚点。研究每个 textAlign 属性值的影响

JavaScript

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

 
// 创建一个位于 150 位置的红色线条
ctx.strokeStyle = "red";
ctx.moveTo(150, 20);
ctx.lineTo(150, 170);
ctx.stroke();

 
ctx.font = "15px Arial";

 
ctx.textAlign = "start";
ctx.fillText("textAlign = start", 150, 60);
ctx.textAlign = "end";
ctx.fillText("textAlign = end", 150, 80);
ctx.textAlign = "left";
ctx.fillText("textAlign = left", 150, 100);
ctx.textAlign = "center";
ctx.fillText("textAlign = center", 150, 120);
ctx.textAlign = "right";
ctx.fillText("textAlign = right", 150, 140);