canvas画布：绘制转动的椭圆形环绕文本
位置:
首页 >
代码集锦[ 发布时间: 2024.5.14 作者: 马黑 阅读: 255 ]
效果
代码
<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 发布: 哈哈，下午就猜，它会动起来的。。这真的动了
