首页 > 作文

详解canvas在圆弧周围绘制文本的两种写法

更新时间:2023-04-03 08:30:42 阅读: 评论:0

教程是直接按弧度进行编写的

自己又试着用角度重新编写了一份,有些差别,总结起来还是用弧度比较方便,当然两种哪种理解的容易可以自行斟酌

写代码有时候不一定要按照教程一板一眼的写,最佳实践固然是好,但是自己尝试些别的也许有些别的收获不是么~

效果如下图

第一种是直接用弧度的

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=parfloat(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.textbaline="middle"   drawcirculartext("clockwi 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.l组织生活会个人对照检查材料ength){        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.textbaline="middle"   drawcirculartext("clockwi around the circle",360,10)  //第三个参数表示文字首位是否相接 差了多少弧度

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持www.887551.com。

本文发布于:2023-04-03 08:30:41,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/2e493984842d590b7ea362dc1a2741ee.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:详解canvas在圆弧周围绘制文本的两种写法.doc

本文 PDF 下载地址:详解canvas在圆弧周围绘制文本的两种写法.pdf

标签:弧度   第三个   参数   半径
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图