canvas笔记-文本水平垂直对齐与度量

在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("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);//baselinecontext.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("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("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>

canvas笔记-文本水平垂直对齐与度量相关推荐

CSS基础学习--17 布局 - 水平垂直对齐
一.元素居中对齐要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;.设置到元素的宽度将防止它溢出到容器的边缘.元素通过指定宽度,并将两边的空外边距平均分配: ...
canvas笔记-文本（fillText）旋转（rotate）
这里fillText直接使用rotate会有问题.估计是旋转中心有问题. 正确的逻辑为: 先使用translate移动中心点在文本起始位置,如何在0,0处fillText即可. 如果要在字符串中心进行 ...
CSS span标签中文字水平垂直对齐
1.text-align: center--水平居中仅对文字.图片.按钮等行内元素有效(display设置为inline或inline-block等)进行水平居中 2.height:60px;lin ...
canvas旋转，水平垂直镜像
//旋转镜像ctx.setTransform(1, 0, 0, 1, 0, 0); //恢复坐标系ctx.translate(location[i].left -component.show.Posi ...
html纵向文本,html – 垂直对齐CSS圈中多行的文本
我创建了一个包含文本的圆圈,文本需要始终居中.很简单,我已经找到了很多例子,例如使用line-height在一行中使用单词. 我的问题是文本有时会包含一行,有时是两行,有时是三行,我无法让它工作. 有 ...
如何给textbox中的文本设置垂直对齐，以及右对齐
应用style="text-align:right" 如:<textarea name="textarea" style="text-align ...
html canvas text 居中,HTML5 Canvas Text文本居中实例
canvas> varcancasOne=document.getElementById('canvasOne');varctx=cancasOne.getContext('2d');varte ...
HTML5 Canvas Text文本居中实例
1.代码: <canvas width="700" height="300" id="canvasOne" class="c ...
canvas绘制文本文本的
在canvas中绘制文本 canvas 提供了两种方法来渲染文本: fillText(text, x, y) 在指定的(x,y)位置填充指定的文本 <!DOCTYPE html> ...

canvas笔记-文本水平垂直对齐与度量

canvas笔记-文本水平垂直对齐与度量相关推荐

最新文章

热门文章