详解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 12 HTML / CSS
基于Jquery和Css3代码制作可以缩放的搜索框
Nov 19 HTML / CSS
CSS3的calc()做响应模式布局的实现方法
Sep 06 HTML / CSS
CSS3实现文本垂直排列的方法
Jul 10 HTML / CSS
css3弹性盒子flex实现三栏布局的实现
Nov 12 HTML / CSS
html5记忆翻牌游戏实现思路及代码
Jul 25 HTML / CSS
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
May 08 HTML / CSS
html5在移动端的屏幕适应问题示例探讨
Jun 15 HTML / CSS
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
Sep 15 HTML / CSS
基于Html5实现的语音搜索功能
May 13 HTML / CSS
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
Apr 07 HTML / CSS
CSS完成视差滚动效果
Apr 27 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
Yii2实现增删改查后留在当前页的方法详解
2017/01/13 PHP
PHP实现的AES加密、解密封装类与用法示例
2018/08/02 PHP
PHP Swoole异步Redis客户端实现方法示例
2019/10/24 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
javascript网页关闭时提醒效果脚本
2008/10/22 Javascript
用js实现的检测浏览器和系统的函数
2009/04/09 Javascript
juqery 学习之三 选择器 子元素与表单
2010/11/25 Javascript
基于JQuery 的消息提示框效果代码
2011/07/31 Javascript
jQuery中hide()方法用法实例
2014/12/24 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
2015/08/21 Javascript
js 获取范围内的随机数实例代码
2016/08/02 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
2016/11/25 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
2018/12/06 jQuery
使用 webpack 插件自动生成 vue 路由文件的方法
2019/08/20 Javascript
vue解决跨域问题(推荐)
2020/11/10 Javascript
[52:09]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第二场
2014/05/26 DOTA
Python 获取新浪微博的最新公共微博实例分享
2014/07/03 Python
Java中重定向输出流实现用文件记录程序日志
2015/06/12 Python
Python入门教程之运算符与控制流
2016/08/17 Python
python利用拉链法实现字典方法示例
2017/03/25 Python
Python与R语言的简要对比
2017/11/14 Python
Python将一个CSV文件里的数据追加到另一个CSV文件的方法
2018/07/04 Python
Python3使用xml.dom.minidom和xml.etree模块儿解析xml文件封装函数的方法
2019/09/23 Python
python爬虫实现获取下一页代码
2020/03/13 Python
Anaconda3中的Jupyter notebook添加目录插件的实现
2020/05/18 Python
美国职棒大联盟官方网上商店:MLBShop.com
2017/11/12 全球购物
英国现代、当代和设计师家具店:Furntastic
2020/07/18 全球购物
Quiksilver美国官网:始于1969年的优质冲浪服和滑雪板外套
2020/04/20 全球购物
MAC彩妆澳洲官网:M·A·C AU
2021/01/17 全球购物
职业教育毕业生求职信
2013/11/09 职场文书
上课迟到检讨书100字
2014/01/11 职场文书
超市总经理岗位职责
2014/02/02 职场文书
2014年党员创先争优承诺书
2014/05/29 职场文书
辞职申请书范本
2019/05/20 职场文书
Django给表单添加honeypot验证增加安全性
2021/05/06 Python
redis protocol通信协议及使用详解
2022/07/15 Redis