【文本】HTML5 Canvas小项目:环形文字(另祝1024节日快乐)

我的处女作《Canvas系列教程》在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作。

教程介绍、教程目录等能在README里查阅。

传送门:https://github.com/827652549/CanvasStudy

介绍

之前我们实现了环形,也实现了文字,现在我们把二者结合在一起。正值今天是1024节,于是就简单实现了一个旋转的环形文字小特效。

在线演示 详细代码

实现环形文本只需要几步:

  1. 计算圆弧周围每个字符的绘制坐标。
  2. 讲坐标系平移到每个字符的绘制坐标。
  3. 将坐标系旋转π/2-angle度。
  4. 对字符进行填充或描边操作。 
发布了122 篇原创文章 · 获赞 25 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/HuoYiHengYuan/article/details/102721153