canvas笔记-文本（fillText）旋转（rotate）

这里fillText直接使用rotate会有问题。估计是旋转中心有问题。

正确的逻辑为：

先使用translate移动中心点在文本起始位置，如何在0，0处fillText即可。

如果要在字符串中心进行旋转，则需要获取字符串长度，translate的时候x进行+，y轴进行-即可。

程序运行截图如下：

绿色的为原始字符串，红色是从顶部进行旋转，绿色为在中心进行旋转。

代码如下：

<!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 = 1980;canvas.height = 1024;let context = canvas.getContext("2d");context.fillStyle = "green";context.fillText("中文ABCDEFG", 400, 400);context.save();context.translate(400, 400);context.rotate(90 * Math.PI / 180);context.fillStyle = "red";context.fillText("中文ABCDEFG", 0, 0);context.restore();//中心位置旋转let strWidth = context.measureText("中文ABCDEFG").width;console.log("strWidth:" + strWidth);context.save();context.translate(400 + strWidth / 2, 400 - strWidth / 2);context.rotate(90 * Math.PI / 180);context.fillStyle = "blue";context.fillText("中文ABCDEFG", 0, 0);context.restore();}</script></body>
</html>

canvas笔记-文本（fillText）旋转（rotate）相关推荐

canvas笔记-文本水平垂直对齐与度量
在canvas中通过textAlign可以设置文本的对齐: 其中left为左对齐,center为居中对齐,right为右对齐. 程序运行截图如下: 源码如下: <!DOCTYPE html> ...
【绘制】HTML5 Canvas坐标变换——坐标系的平移(translate)、缩放(scale)、旋转(rotate)、镜像。（图文、代码）
我的处女作<Canvas系列教程>在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作. 教程介绍.教程目录等能在README里查阅. 传送门:https: ...
html5文本设置字体大小,HTML5 Canvas的文本设置字体和大小
网页制作文章简介:HTML5 Canvas的文本设置字体和大小. HTML5 Canvas的文本设置字体和大小,我们可以使用的字体在画布范围内的属性. 下面我们就做一个简单的实例为大家讲解下,基本语法 ...
canvas绘制文本文本的
在canvas中绘制文本 canvas 提供了两种方法来渲染文本: fillText(text, x, y) 在指定的(x,y)位置填充指定的文本 <!DOCTYPE html> ...
9月1日目标检测学习笔记——文本检测
文章目录前言一.类型 1.Top-Down 2.Bottom-up 二.基于深度学习的文本检测模型 1.CTPN 2.RRPN 3.FTSN 4.DMPNet 5.EAST 6.SegLink 7 ...
html5 canvas画文本框,HTML5 canvas绘制文本
HTML5的canvas也提供渲染文本的方法. (1)绘制文本方法:fillText和strokeText fillText(text,x,y[,maxWidth]) 在指定的(x,y)位置填充指定的 ...
CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）
在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形处理,本文将对此做详细介绍. 一.旋转 rotate 用法:transform: rotate(45 ...
2D转换之旋转rotate（CSS3）
2D转换之旋转rotate(CSS3) <!DOCTYPE html> <html lang="en"><head><meta chars ...
Task02：学习笔记文本预处理；语言模型；循环神经网络基础
Task02:学习笔记文本预处理:语言模型:循环神经网络基础文本预处理文本是一类序列数据,一篇文章可以看作是字符或单词的序列,本节将介绍文本数据的常见预处理步骤,预处理通常包括四个步骤: 读入文本 ...

canvas笔记-文本（fillText）旋转（rotate）

canvas笔记-文本（fillText）旋转（rotate）相关推荐

最新文章

热门文章