详解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的动画按钮代码教程
Nov 23 HTML / CSS
css3弹性盒子flex实现三栏布局的实现
Nov 12 HTML / CSS
HTML5 Canvas绘制文本及图片的基础教程
Mar 14 HTML / CSS
HTML5 CSS3新的WEB标准和浏览器支持
Jul 16 HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
Dec 26 HTML / CSS
使用HTML5进行SVG矢量图形绘制的入门教程
Feb 19 HTML / CSS
Html5 web本地存储实例详解
Jul 28 HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
Feb 13 HTML / CSS
HTML5自定义属性的问题分析
Aug 16 HTML / CSS
Html5页面上如何禁止手机虚拟键盘弹出
Mar 19 HTML / CSS
Canvas 文本填充线性渐变的使用详解
Jun 22 HTML / CSS
深入理解margin塌陷和margin合并的解决方案
Jun 26 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
wamp安装后自定义配置的方法
2014/08/23 PHP
PHP技术开发微信公众平台
2015/07/22 PHP
如何用PHP来实现一个动态Web服务器
2015/07/29 PHP
详解PHP实现执行定时任务
2015/12/21 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
PHP数据库操作三:redis用法分析
2017/08/16 PHP
网页右下角弹出窗体实现代码
2014/06/05 Javascript
jquery 实现两Select 标签项互调示例代码
2014/09/25 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
2016/04/20 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
JS如何设置iOS中微信浏览器的title
2016/11/22 Javascript
vue实现在表格里,取每行的id的方法
2018/03/09 Javascript
JS简单生成由字母数字组合随机字符串示例
2018/05/25 Javascript
Bootstrap Table中的多选框删除功能
2018/07/15 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
2018/08/24 Javascript
如何使用pm2快速将项目部署到远程服务器
2019/03/12 Javascript
浅谈Python 字符串格式化输出(format/printf)
2016/07/21 Python
python制作websocket服务器实例分享
2016/11/20 Python
django创建自定义模板处理器的实例详解
2017/08/14 Python
不知道这5种下划线的含义,你就不算真的会Python!
2018/10/09 Python
打包python 加icon 去掉cmd黑窗口方法
2019/06/24 Python
Python虚拟环境的原理及使用详解
2019/07/02 Python
Python多版本开发环境管理工具介绍
2019/07/03 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
在Matplotlib图中插入LaTex公式实例
2020/04/17 Python
python多进程 主进程和子进程间共享和不共享全局变量实例
2020/04/25 Python
Reebonz中国官网:新加坡奢侈品购物网站
2017/03/17 全球购物
巴西箱包、背包、钱包和旅行配件购物网站:Inovathi
2019/12/14 全球购物
Auguste The Label官网:澳大利亚一家精品女装时尚品牌
2020/06/14 全球购物
Lucene推荐的分页方式是什么?
2015/12/07 面试题
个人求职信范文
2014/05/24 职场文书
假面舞会策划方案
2014/05/29 职场文书
2014镇党委班子对照检查材料思想汇报
2014/09/23 职场文书
文明倡议书
2015/01/19 职场文书
导游词创作书写原则以及开场白技巧怎么学?
2019/09/25 职场文书
Apache压力测试工具的安装使用
2021/03/31 Servers