详解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实现一个div设置多张背景图片及background-image属性实例演示
Aug 10 HTML / CSS
在css3中background-clip属性与background-origin属性的用法介绍
Nov 13 HTML / CSS
css3实现input输入框颜色渐变发光效果代码
Apr 02 HTML / CSS
css3实现垂直下拉动画菜单示例
Apr 22 HTML / CSS
深入浅析css3 border-image边框图像详解
Nov 24 HTML / CSS
利用CSS3的3D效果制作正方体
Mar 10 HTML / CSS
涂鸦板简单实现 Html5编写属于自己的画画板
Jul 05 HTML / CSS
HTML5新增的Css选择器、伪类介绍
Aug 07 HTML / CSS
简单整理HTML5的基本特性和语法
Feb 18 HTML / CSS
H5 meta小结(前端必看篇)
Aug 24 HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
Aug 19 HTML / CSS
POST提交数据常见的四种方式
Jan 18 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制作静态网站的模板框架(二)
2006/10/09 PHP
PHP按指定键值对二维数组进行排序的方法
2015/12/22 PHP
Yii2使用swiftmailer发送邮件的方法
2016/05/03 PHP
php的laravel框架快速集成微信登录的方法
2016/12/12 PHP
IE中jscript/javascript的条件编译
2006/09/07 Javascript
DHTML 中的绝对定位
2006/11/26 Javascript
jQuery 下拉列表 二级联动插件分享
2012/03/29 Javascript
JavaScript中提前声明变量或函数例子
2014/11/12 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
2015/06/24 Javascript
理解javascript中的严格模式
2016/02/01 Javascript
JS生成某个范围的随机数【四种情况详解】
2016/04/20 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
2016/10/14 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
2017/07/26 Javascript
Vue 组件注册实例详解
2019/02/23 Javascript
在小程序中推送模板消息的实现方法
2019/07/22 Javascript
js实现select下拉框选择
2020/01/11 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
javascript实现简易计算器功能
2020/09/23 Javascript
[43:51]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS Secret
2018/03/31 DOTA
python保存字符串到文件的方法
2015/07/01 Python
Python实现的大数据分析操作系统日志功能示例
2019/02/11 Python
django ManyToManyField多对多关系的实例详解
2019/08/09 Python
一文读懂Python 枚举
2020/08/25 Python
HTML5实时语音通话聊天MP3压缩传输3KB每秒
2019/08/28 HTML / CSS
HTML5 在canvas中绘制文本附效果图
2014/06/23 HTML / CSS
W Concept美国:精选全球独立设计师
2017/02/22 全球购物
Monica Vinader官网:英国轻奢珠宝品牌
2020/02/05 全球购物
六年级数学教学反思
2014/02/03 职场文书
好书伴我成长演讲稿
2014/05/14 职场文书
红色故事演讲稿
2014/05/22 职场文书
干部对照检查材料范文
2014/08/26 职场文书
地下停车场租赁协议范本
2014/10/07 职场文书
2014年工人工作总结
2014/11/25 职场文书
2016年圣诞节活动总结范文
2016/04/01 职场文书
golang在GRPC中设置client的超时时间
2021/04/27 Golang
windows server 2016 域环境搭建的方法步骤(图文)
2022/06/25 Servers