请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 马黑黑 于 2024-5-14 20:34 编辑
效果
代码
<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>
| 
发表于 2024-5-14 20:31
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2024-5-14 21:38
