文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

canvas在圆弧周围绘制文本的方法有哪些

2023-06-09 21:55

关注

小编给大家分享一下canvas在圆弧周围绘制文本的方法有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

效果如下图

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)  //第三个参数表示文字首位是否相接 差了多少弧度

以上是“canvas在圆弧周围绘制文本的方法有哪些”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯