马黑PHP整站系统

canvas画布:绘制转动的椭圆形环绕文本

位置: 首页 > 代码集锦[ 发布时间: 2024.5.14  作者: 马黑  阅读: 45 ]

效果

代码

<canvas id="mycanv" width="600" height="360" style="border:1px solid gray"></canvas>   <script>   var ww = mycanv.width, hh = mycanv.height, deg = -90; var ctx = mycanv.getContext('2d');   class ccText {     constructor(text) {         this.chars = text.split('');         this.colors = this.chars.map(color => `#${Math.random().toString(16).substr(2,6)}`);     };     draw(context) {         context.font = 'bold 60px sans-serif';         context.textAlign = 'center';         context.textBaseline = 'middle';         context.shadowOffsetX = -2;         context.shadowOffsetY = 2;         context.shadowColor = '#000';         context.shadowBlur = 4;         var a = 360 / this.chars.length, r1 = ww/2 - 40, r2 = hh/2 - 40;         this.chars.forEach((char,key) => {             var rad = (a * key + deg) * Math.PI / 180;             var x = ww/2 + r1 * Math.cos(rad), y = hh/2 + r2 * Math.sin(rad);             context.fillStyle = this.colors[key];             context.fillText(char, x, y);         });     }; };   var cc = new ccText('風和日麗囍看萬紫千紅');   var render = () => {     requestAnimationFrame(render);     ctx.clearRect(0, 0, ww, hh);     deg = (deg + 0.5) % 360;     cc.draw(ctx); };   render();   </script>

前一篇: canvas画布:让立体正五角星转起来
下一篇: JS函数式编程中的纯函数

发表评论:

       

评论列表 [1条]

#1 | 悄然 于 2024-5-14 21:36 发布: 哈哈,下午就猜,它会动起来的。。这真的动了

Copyright © 2023 All Right Reserved 马黑PHP文章管理整站系统v1.8
联系我们: gxblk@163.com