详解canvas在圆弧周围绘制文本的两种写法


Posted in HTML / CSS onMay 22, 2018

教程是直接按弧度进行编写的

自己又试着用角度重新编写了一份,有些差别,总结起来还是用弧度比较方便,当然两种哪种理解的容易可以自行斟酌

写代码有时候不一定要按照教程一板一眼的写,最佳实践固然是好,但是自己尝试些别的也许有些别的收获不是么~

效果如下图

详解canvas在圆弧周围绘制文本的两种写法

第一种是直接用弧度的

var canvas=document.getElementById("canvas")
    var context=canvas.getContext("2d")

    var TEXT_FILL_STYLE="rgba(100,130,240,0.5)"
    var TEXT_STROKE_STYLE="rgba(200,0,0,0.7)"
    var TEXT_SIZE=64;
    circle={
        x:canvas.width/2,
        y:canvas.height/2,
        radius:200
    }
    function drawCircularText(string,startAngle,endAngle){
      var radius=circle.radius //圆的半径
      var angleDecrement=(startAngle-endAngle)/(string.length-1)//每个字母占的弧度
      var angle=parseFloat(startAngle) //转一下数字
      var index=0;
      var character;

      context.save()
      context.fillStyle=TEXT_FILL_STYLE;
      context.strokeStyle=TEXT_STROKE_STYLE;
      context.font=TEXT_SIZE+"px Lucida Sans"

      while(index<string.length){
        character=string.charAt(index)
        context.save()
        context.beginPath()
        context.translate(circle.x+Math.cos(angle)*radius,circle.y-Math.sin(angle)*radius)
        context.rotate(Math.PI/2-angle)   //Math.PI/2为旋转90度  Math.PI/180*X为旋转多少度
        context.fillText(character,0,0)
        context.strokeText(character,0,0)
        angle-=angleDecrement
        index++
        context.restore()

      }
      context.restore()
    }
    context.textAlign="center"
    context.textBaseLine="middle"
   drawCircularText("clockwise around the circle",Math.PI*2,Math.PI/8)  //第三个参数表示文字首位是否相接 差了多少弧度

第二种是用角度带入的 请注意drawCircularText的第二个参数和第三个参数的不同

var canvas=document.getElementById("canvas")
    var context=canvas.getContext("2d")

    var TEXT_FILL_STYLE="rgba(100,130,240,0.5)"
    var TEXT_STROKE_STYLE="rgba(200,0,0,0.7)"
    var TEXT_SIZE=64;
    circle={
        x:canvas.width/2,
        y:canvas.height/2,
        radius:200
    }
    function drawCircularText(string,startAngle,endAngle){
      var radius=circle.radius //圆的半径
      var angleDecrement=(startAngle-endAngle)/(string.length-1)//每个字母占的弧度
      var angle=startAngle //
      
      var index=0;
      var character;

      context.save()
      context.fillStyle=TEXT_FILL_STYLE;
      context.strokeStyle=TEXT_STROKE_STYLE;
      context.font=TEXT_SIZE+"px Lucida Sans"

      while(index<string.length){
        character=string.charAt(index)
        context.save()
        context.beginPath()
        context.translate(circle.x+Math.cos((Math.PI/180)*angle)*radius,circle.y-Math.sin((Math.PI/180)*angle)*radius)
        context.rotate((Math.PI/2)-(Math.PI/180)*angle)   //Math.PI/2为旋转90度  Math.PI/180*X为旋转多少度
        context.fillText(character,0,0)
        context.strokeText(character,0,0)
        angle-=angleDecrement
        index++
        context.restore()

      }
      context.restore()
    }
    context.textAlign="center"
    context.textBaseLine="middle"
   drawCircularText("clockwise around the circle",360,10)  //第三个参数表示文字首位是否相接 差了多少弧度

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3系列之3D制作方法案例
Aug 14 HTML / CSS
css3动画效果抖动解决方法
Sep 03 HTML / CSS
CSS3实现多背景展示效果通过CSS3定位多张背景
Aug 10 HTML / CSS
CSS3实现大小不一的粒子旋转加载动画
Apr 21 HTML / CSS
css3中flex布局宽度不生效的解决
Dec 09 HTML / CSS
HTML5 File接口在web页面上使用文件下载
Feb 27 HTML / CSS
html5 学习简单的拾色器
Sep 03 HTML / CSS
多视角3D可旋转的HTML5 Logo动画
Mar 02 HTML / CSS
HTML5不支持标签和新增标签详解
Jun 27 HTML / CSS
详解html5 canvas常用api总结(二)--绘图API
Dec 14 HTML / CSS
HTML5 实现图片上传预处理功能
Feb 06 HTML / CSS
HTML中的表单Form实现居中效果
May 25 HTML / CSS
HTML5 device access 设备访问详解
May 24 #HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
May 25 #HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
May 28 #HTML / CSS
HTML5探秘:用requestAnimationFrame优化Web动画
Jun 03 #HTML / CSS
html5触摸事件判断滑动方向的实现
Jun 05 #HTML / CSS
使用Canvas操作像素的方法
Jun 14 #HTML / CSS
Html5移动端获奖无缝滚动动画实现示例
Jun 25 #HTML / CSS
You might like
又十个超级有用的PHP代码片段
2015/09/24 PHP
PHP 的比较运算与逻辑运算详解
2016/05/12 PHP
laravel5创建service provider和facade的方法详解
2016/07/26 PHP
利用PHP命令行模式采集股票趋势信息
2016/08/09 PHP
探究Laravel使用env函数读取环境变量为null的问题
2016/12/06 PHP
关于laravel模板中生成URL的几种模式总结
2019/10/18 PHP
提高网站性能之 如何对待JavaScript
2009/10/31 Javascript
jQuery hover 延时器实现代码
2011/03/12 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
2014/01/07 Javascript
js实现分页功能
2017/05/24 Javascript
AngularJS实现tab选项卡的方法详解
2017/07/05 Javascript
详解vuex结合localstorage动态监听storage的变化
2018/05/03 Javascript
vue+axios+mock.js环境搭建的方法步骤
2018/08/28 Javascript
js实现通过开始结束控制的计时器
2019/02/25 Javascript
ECharts地图绘制和钻取简易接口详解
2019/07/12 Javascript
[01:39]2014DOTA2国际邀请赛 Newbee经理CU专访队伍火力全开
2014/07/15 DOTA
python搜索指定目录的方法
2015/04/29 Python
Python 类的继承实例详解
2017/03/25 Python
python机器学习理论与实战(二)决策树
2018/01/19 Python
python抽取指定url页面的title方法
2018/05/11 Python
Python中logging.NullHandler 的使用教程
2018/11/29 Python
python调用staf自动化框架的方法
2018/12/26 Python
python 实现矩阵上下/左右翻转,转置的示例
2019/01/23 Python
详解Python3 pandas.merge用法
2019/09/05 Python
如何基于Python + requests实现发送HTTP请求
2020/01/13 Python
tf.concat中axis的含义与使用详解
2020/02/07 Python
解决pycharm中的run和debug失效无法点击运行
2020/06/09 Python
python 实现关联规则算法Apriori的示例
2020/09/30 Python
css3动画效果小结(推荐)
2016/07/25 HTML / CSS
HTML5的video标签的浏览器兼容性增强方案分享
2016/05/19 HTML / CSS
Pat McGrath Labs官网:世界上最有影响力的化妆师推出的彩妆品牌
2018/01/07 全球购物
西安启天科技有限公司网络工程师面试题笔试题
2016/06/12 面试题
幼儿园消防安全制度
2014/01/26 职场文书
中班上学期幼儿评语
2014/04/30 职场文书
2014年药店店长工作总结
2014/11/17 职场文书
《帝国时代4》赛季预告 新增内容编译器可创造地图
2022/04/03 其他游戏