菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

HTML Canvas 文本对齐


HTML Canvas 文本对齐

要对齐 Canvas 中的文本,我们使用两个属性

  • textBaseline - 定义文本的基线(垂直对齐方式)
  • textAlign - 定义文本的水平对齐方式

textBaseline 属性

textBaseline 属性定义文本的基线(垂直对齐方式)。

textBaseline 属性可以具有以下值

  • "top"
  • "hanging"
  • "middle"
  • "alphabetic" - 这是默认值
  • "ideographic"
  • "bottom"

示例

textBaseline 属性不同值的演示

您的浏览器不支持 HTML5 canvas 标签。
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// 创建一条线
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>
自己动手试一试 »


textAlign 属性

textAlign 属性定义文本的水平对齐方式。

textAlign 属性可以具有以下值

  • "left"
  • "right"
  • "center"
  • "start" - 这是默认值
  • "end"

示例

textAlign 属性不同值的演示

您的浏览器不支持 HTML5 canvas 标签。
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// 创建一条线
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>
自己动手试一试 »

居中文本

示例

在 Canvas 中垂直和水平居中文本

您的浏览器不支持 HTML5 canvas 标签。
<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>
自己动手试一试 »

×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持