详解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匹配手机屏幕横竖状态
Jan 27 HTML / CSS
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
Aug 08 HTML / CSS
CSS3哪些新特性值得称赞
Mar 02 HTML / CSS
利用CSS3实现进度条的两种姿势详解
Mar 21 HTML / CSS
HTML5如何实现元素拖拽
Mar 11 HTML / CSS
HTML5 File接口在web页面上使用文件下载
Feb 27 HTML / CSS
详解html5页面 rem 布局适配方法
Jan 12 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
Nov 01 HTML / CSS
HTML5实现无刷新修改URL的方法
Nov 14 HTML / CSS
html5视频自动横过来自适应页面且点击播放功能的实现
Jun 03 HTML / CSS
Css预编语言及区别详解
Apr 25 HTML / CSS
css3 实现文字闪烁效果的三种方式示例代码
Apr 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和Mysqlweb应用开发核心技术 第1部分 Php基础-3 代码组织和重用2
2011/07/03 PHP
mysql数据库差异比较的PHP代码
2012/02/05 PHP
深入解析PHP的引用计数机制
2013/06/14 PHP
一个显示效果非常不错的PHP错误、异常处理类
2014/03/21 PHP
php常量详细解析
2015/10/27 PHP
详解php框架Yaf路由重写
2017/06/20 PHP
Laravel5.0+框架邮件发送功能实现方法图文与实例详解
2019/04/23 PHP
php设计模式之建造器模式分析【星际争霸游戏案例】
2020/01/23 PHP
laravel框架模型和数据库基础操作实例详解
2020/01/25 PHP
php实现图片压缩处理
2020/09/09 PHP
如何实现iframe(嵌入式帧)的自适应高度
2006/07/26 Javascript
JS控件autocomplete 0.11演示及下载 1月5日已更新
2007/01/09 Javascript
两个数组去重的JS代码
2013/12/04 Javascript
jquery获取tagName再进行判断
2014/05/29 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
2014/06/26 Javascript
JavaScript调试工具汇总
2014/12/23 Javascript
简介JavaScript中Boolean.toSource()方法的使用
2015/06/05 Javascript
jQuery实现字符串全部替换的方法
2016/12/12 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
2017/09/20 Javascript
vue项目中使用ueditor的实例讲解
2018/03/05 Javascript
[46:47]完美世界DOTA2联赛PWL S2 FTD vs Magma 第二场 11.20
2020/11/23 DOTA
Python图算法实例分析
2016/08/13 Python
如何基于python实现归一化处理
2020/01/20 Python
Python通过Tesseract库实现文字识别
2020/03/05 Python
在keras中实现查看其训练loss值
2020/06/16 Python
关于css兼容性问题及一些常见问题汇总
2016/05/03 HTML / CSS
英国皇家邮政海外旗舰店:Royal Mail
2018/02/21 全球购物
Superdry极度干燥美国官网:英国制造的服装品牌
2018/11/13 全球购物
街头时尚在线:JESSICABUURMAN
2019/06/16 全球购物
优秀中专生推荐信
2013/11/17 职场文书
高中学生评语大全
2014/04/25 职场文书
2014县政府领导班子对照检查材料思想汇报
2014/09/25 职场文书
离婚协议书范本(2014版)
2014/09/28 职场文书
上课说话检讨书500字
2014/11/01 职场文书
毕业设计论文致谢词
2015/05/14 职场文书
全家福照片寄语怎么写?
2019/04/02 职场文书