<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>canvas艺术字-扩展</title><style>html{height: 100%;overflow: hidden;}body{height: 100%;margin: 0;}#test{background: #000;}</style></head><body><canvas id="test"></canvas><script>const cvs=document.getElementById('test');//canvas充满窗口cvs.width=window.innerWidth;cvs.height=window.innerHeight;//画笔const ctx=cvs.getContext('2d');//颜色数组const colors=['red','yellow'];/*文字内容*/const text='学习最高尚';/*文字位置*/const [x,y]=[600,600];//字体属性ctx.font='bold 220px arial';function draw(){//保存上下文对象的状态ctx.save();//设置描边样式ctx.strokeStyle=colors[0];//设置描边宽度ctx.lineWidth=3;//虚线ctx.setLineDash([8]);//以描边的方式显示路径ctx.strokeText(text,x,y);//第二部分虚线ctx.lineDashOffset=8;ctx.strokeStyle=colors[1];//光晕ctx.shadowColor='orange';//多画几遍光晕for(let i=25;i>3;i-=2){ctx.shadowBlur=i;ctx.strokeText(text,x,y);}//将上下文对象的状态恢复到上一次保存时的状态ctx.restore();}draw();setInterval(function(){ctx.clearRect(0,0,cvs.width,cvs.height);draw();colors.reverse();},500)</script> </body></html>
如果觉得《canvas艺术字-扩展-闪烁效果》对你有帮助，请点赞、收藏，并留下你的观点哦！
