在canvas中通过textAlign可以设置文本的对齐：
其中left为左对齐，center为居中对齐，right为右对齐。
程序运行截图如下：
源码如下：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- </head>
- <body>
-
- <canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
- 当前浏览器不支持canvas
- </canvas>
-
- <script>
-
- window.onload = function(){
-
- let canvas = document.getElementById("canvas");
- canvas.width = 800;
- canvas.height = 800;
- let context = canvas.getContext("https://cdn.jxasp.com:9143/image/2d");
-
- context.fillStyle = "#058";
- context.font = "bold 40px sans-serif";
-
- context.textAlign = "left";
- context.fillText("textAlign = left", 400, 100);
- context.textAlign = "center";
- context.fillText("textAlign = left", 400, 200);
- context.textAlign = "right";
- context.fillText("textAlign = left", 400, 300);
-
- //baseline
- context.strokeStyle = "#888";
- context.moveTo(400, 0);
- context.lineTo(400, 800);
- context.stroke();
- }
-
-
- </script>
-
- </body>
- </html>
上面是指水平对齐，下面记录下垂直对齐
通过调用textbaseline函数进行垂直对齐，其中top为向上对齐，middle为居中对齐，bottom为底部对齐，默认情况下是alphabetic，还有2给参数一个是ideographic为中文，hanging为印度文的。
下面简单记录下。
程序运行截图如下：
源码如下：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- </head>
- <body>
-
- <canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
- 当前浏览器不支持canvas
- </canvas>
-
- <script>
-
- window.onload = function(){
-
- let canvas = document.getElementById("canvas");
- canvas.width = 800;
- canvas.height = 800;
- let context = canvas.getContext("https://cdn.jxasp.com:9143/image/2d");
-
- context.fillStyle = "#058";
- context.font = "bold 40px sans-serif";
-
- context.textBaseline = "top";
- context.fillText("中文ABC12345@！#@￥%%%*&", 40, 100);
- drawBaseline(context, 100);
-
- context.textBaseline = "middle";
- context.fillText("中文ABC12345@！#@￥%%%*&", 40, 200);
- drawBaseline(context, 200);
-
- context.textBaseline = "bottom";
- context.fillText("中文ABC12345@！#@￥%%%*&", 40, 300);
- drawBaseline(context, 300);
-
- context.textBaseline = "ideographic";
- context.fillText("中文ABC12345@！#@￥%%%*&", 40, 400);
- drawBaseline(context, 400);
-
- context.textBaseline = "hanging";
- context.fillText("中文ABC12345@！#@￥%%%*&", 40, 500);
- drawBaseline(context, 500);
- }
-
- function drawBaseline(cxt, h){
-
- let width = cxt.canvas.width;
- cxt.save();
- cxt.strokeStyle = "#899";
- cxt.lineWidth = 2;
- cxt.moveTo(0, h);
- cxt.lineTo(width, h);
- cxt.stroke();
- cxt.restore();
- }
-
-
- </script>
-
- </body>
- </html>
下面是文本的度量
再canvas中通过measureText(string).width可以获取其长度。
程序运行截图如下：
源码如下：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- </head>
- <body>
-
- <canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
- 当前浏览器不支持canvas
- </canvas>
-
- <script>
-
- window.onload = function(){
-
- let canvas = document.getElementById("canvas");
- canvas.width = 800;
- canvas.height = 800;
- let context = canvas.getContext("https://cdn.jxasp.com:9143/image/2d");
-
- context.fillStyle = "#058";
- context.font = "bold 40px sans-serif";
-
- let stringValue = "中文ABC12345@！#@￥%%%*&";
- context.fillText(stringValue, 40, 100);
- let textWidth = context.measureText(stringValue).width;
- context.fillText("字符串宽度为：" + textWidth + "px", 40, 200);
- }
-
- </script>
-
- </body>
- </html>
