HTML5 Canvas实现文本对齐的方法总结

时间2024-01-23 11:55:19发布访客分类HTML浏览197

导读：收集整理的这篇文章主要介绍了HTML5 Canvas实现文本对齐的方法总结，觉得挺不错的，现在分享给大家，也给大家做个参考。这篇文章主要介绍了HTML5 canvas实现文本对齐的方法总结,包括使用水平对齐的context.textAlig...

收集整理的这篇文章主要介绍了HTML5 Canvas实现文本对齐的方法总结，觉得挺不错的，现在分享给大家，也给大家做个参考。这篇文章主要介绍了HTML5 canvas实现文本对齐的方法总结,包括使用水平对齐的context.textAlign与垂直对齐的context.textBaseline两种方式及各种参数,需要的朋友可以参考下

水平对齐textAlign

JavaScript Code复制内容到剪贴板

context.textAlign="center|end|left|right|start";

其中各值及意义如下表。

!DOCTYPE htML>
       html lang="zh">
       head>
           meta charset="UTF-8">
           tITle>
    textAlign/title>
           style>
           body {
     background: url("./images/bg3.jpg") repeat;
 }
         #canvas {
     border: 1px solid #aaaaaa;
     display: block;
     margin: 50px auto;
 }
           /style>
       /head>
       body>
       p id="canvas-warp">
           canvas id="canvas">
               你的浏览器居然不支持Canvas？！赶快换一个吧！！       /canvas>
       /p>
         script>
       window.onload = function(){
               VAR canvas = document.getElementById("canvas");
               canvas.width = 800;
               canvas.height = 600;
               var context = canvas.getContext("2d");
               context.fillStyle = "#FFF";
               context.fillRect(0,0,800,600);
                 // 在位置 400 创建蓝线           context.strokeStyle="blue";
               context.moveTo(400,100);
               context.lineto(400,500);
               context.stroke();
                   context.fillStyle = "#000";
               context.font="50px Arial";
                 // 显示不同的 textAlign 值           context.textAlign="start";
               context.fillText("textAlign=start", 400, 120);
               context.textAlign="end";
               context.fillText("textAlign=end", 400, 200);
               context.textAlign="left";
               context.fillText("textAlign=left", 400, 280);
               context.textAlign="center";
               context.fillText("textAlign=center", 400, 360);
               context.textAlign="right";
               context.fillText("textAlign=right", 400, 480);
       }
    ;
       /script>
       /body>
       /html>

值	描述
start	默认。文本在指定的位置开始。
end	文本在指定的位置结束。
center	文本的中心被放置在指定的位置。
left	文本左对齐，
right	文本右对齐。

我们通过一个例子来直观的感受一下。

JavaScript Code复制内容到剪贴板

!DOCTYPE html>
       html lang="zh">
       head>
           meta charset="UTF-8">
           title>
    textBaseline/title>
           style>
           body {
     background: url("./images/bg3.jpg") repeat;
 }
          #canvas {
     border: 1px solid #aaaaaa;
     display: block;
     margin: 50px auto;
 }
           /style>
       /head>
       body>
       div id="canvas-warp">
           canvas id="canvas">
               你的浏览器居然不支持Canvas？！赶快换一个吧！！       /canvas>
       /div>
         script>
       window.onload = function(){
               var canvas = document.getElementById("canvas");
               canvas.width = 800;
               canvas.height = 600;
               var context = canvas.getContext("2d");
               context.fillStyle = "#FFF";
               context.fillRect(0,0,800,600);
                 //在位置 y=300 绘制蓝色线条           context.strokeStyle="blue";
               context.moveTo(0,300);
               context.lineTo(800,300);
               context.stroke();
                 context.fillStyle = "#00AAAA";
               context.font="20px Arial";
                 //在 y=300 以不同的 textBaseline 值放置每个单词           context.textBaseline="top";
               context.fillText("Top",150,300);
               context.textBaseline="bottom";
               context.fillText("Bottom",250,300);
               context.textBaseline="middle";
               context.fillText("Middle",350,300);
               context.textBaseline="alphabetic";
               context.fillText("Alphabetic",450,300);
               context.textBaseline="hanging";
               context.fillText("Hanging",550,300);
       }
    ;
       /script>
       /body>
       /html>

运行结果：

垂直对齐textBaseline

JavaScript Code复制内容到剪贴板

context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";

其中各值及意义如下表。

值	描述
alphabetic	默认。文本基线是普通的字母基线。
top	文本基线是em方框的顶端。
hanging	文本基线是悬挂基线。
middle	文本基线是em方框的正中。
ideographic	文本基线是表意基线。
bottom	文本基线是em方框的底端。

首先咱们通过一个图来看一下各个基线代表的位置。

我们通过一个例子来直观的感受一下。

JavaScript Code复制内容到剪贴板

!DOCTYPE html>
       html lang="zh">
       head>
           meta charset="UTF-8">
           title>
    textBaseline/title>
           style>
           body {
     background: url("./images/bg3.jpg") repeat;
 }
         #canvas {
     border: 1px solid #aaaaaa;
     display: block;
     margin: 50px auto;
 }
           /style>
       /head>
       body>
       p id="canvas-warp">
           canvas id="canvas">
               你的浏览器居然不支持Canvas？！赶快换一个吧！！       /canvas>
       /p>
         script>
       window.onload = function(){
               var canvas = document.getElementById("canvas");
               canvas.width = 800;
               canvas.height = 600;
               var context = canvas.getContext("2d");
               context.fillStyle = "#FFF";
               context.fillRect(0,0,800,600);
                 //在位置 y=300 绘制蓝色线条           context.strokeStyle="blue";
               context.moveTo(0,300);
               context.lineTo(800,300);
               context.stroke();
                 context.fillStyle = "#00AAAA";
               context.font="20px Arial";
                 //在 y=300 以不同的 textBaseline 值放置每个单词           context.textBaseline="top";
               context.fillText("Top",150,300);
               context.textBaseline="bottom";
               context.fillText("Bottom",250,300);
               context.textBaseline="middle";
               context.fillText("Middle",350,300);
               context.textBaseline="alphabetic";
               context.fillText("Alphabetic",450,300);
               context.textBaseline="hanging";
               context.fillText("Hanging",550,300);
       }
    ;
       /script>
       /body>
       /html>

运行结果：