详解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实现的圆形旋转分享按钮旋转角度可自己调整
Sep 02 HTML / CSS
CSS3绘制超炫的上下起伏波动进度加载动画
Apr 21 HTML / CSS
图解CSS3制作圆环形进度条的实例教程
May 26 HTML / CSS
Html5内唤醒百度、高德APP的实现示例
May 20 HTML / CSS
html5 canvas 使用示例
Oct 22 HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
Dec 26 HTML / CSS
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
Jan 09 HTML / CSS
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
Jan 30 HTML / CSS
html5 音乐播放器 audio 标签使用概述
Jul 15 HTML / CSS
HTML5实现预览本地图片
Feb 17 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
Nov 14 HTML / CSS
HTML5 图片预加载的示例代码
Mar 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
2006/12/14 PHP
采用PHP函数memory_get_usage获取PHP内存清耗量的方法
2011/12/06 PHP
通过Email发送PHP错误的方法
2015/07/20 PHP
php防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
php打乱数组二维数组多维数组的简单实例
2016/06/17 PHP
tp5.1 框架路由操作-URL生成实例分析
2020/05/26 PHP
jQuery使用slideUp方法实现控制元素缓慢收起
2015/03/27 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
2016/05/05 Javascript
深入理解jQuery事件绑定
2016/06/02 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
2016/08/25 Javascript
jQuery选择器之子元素选择器详解
2017/09/18 jQuery
iconfont的三种使用方式详解
2018/08/05 Javascript
node app 打包工具pkg的具体使用
2019/01/17 Javascript
Vue中JS动画与Velocity.js的结合使用
2019/02/13 Javascript
Vue中CSS动画原理的实现
2019/02/13 Javascript
vue强制刷新组件的方法示例
2019/02/28 Javascript
vue elementUI使用tabs与导航栏联动
2019/06/21 Javascript
VueX模块的具体使用(小白教程)
2020/06/05 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
2020/07/17 Javascript
[01:03:36]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第二场 1月26日
2021/03/11 DOTA
使用Python中PDB模块中的命令来调试Python代码的教程
2015/03/30 Python
Python对数据进行插值和下采样的方法
2018/07/03 Python
在Python中使用defaultdict初始化字典以及应用方法
2018/10/31 Python
python实现把两个二维array叠加成三维array示例
2019/11/29 Python
使用python检查yaml配置文件是否符合要求
2020/04/09 Python
浅谈python出错时traceback的解读
2020/07/15 Python
python连接mongodb数据库操作数据示例
2020/11/30 Python
微软新西兰官方网站:Microsoft New Zealand
2018/08/17 全球购物
乌克兰网上服装店:Bolf.ua
2018/10/30 全球购物
Linux常见面试题
2016/10/04 面试题
大专生简历的自我评价
2013/11/26 职场文书
开学典礼策划方案
2014/05/28 职场文书
党的群众路线教育实践活动对照检查材料思想汇报
2014/09/19 职场文书
看上去很美观后感
2015/06/10 职场文书
Python中相见恨晚的技巧
2021/04/13 Python
MySQL添加索引特点及优化问题
2022/07/23 MySQL