canvas艺术字-扩展-闪烁效果

<!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艺术字-扩展-闪烁效果相关推荐

canvas笔记-扩展canvas的context及画椭圆及浏览器兼容问题
首先是扩展canvas的context 比如扩展一个画五角星的代码 <!DOCTYPE html> <html lang="en"> <head> ...
Canvas实现小星星闪烁效果
html结构: <div> <img src="banner01.jpg" alt=""> <canvas></can ...
使用Canvas扩展绘制动态ASP.NET Core Blazor条形图
目录介绍背景使用代码步骤1:创建ASP.NET Core Blazor服务器应用程序运行测试应用程序步骤2:安装软件包步骤3:建立模型类别创建服务类步骤4:将服务添加到Startup ...
使用H5 canvas画一个坦克
具体步骤如下: 1. 首先做出绘图区,作为坦克的战场 <canvas id="floor" width="800px" height="50 ...
淘宝小部件 Canvas 渲染流程与原理全解析
作者:史健平(楚奕) 上篇回顾:<淘宝小部件:全新的开放卡片技术!>.<淘宝小部件在 2021 双十一中的规模化应用> 本文主要从技术视角阐述 Canvas 在小部件下的渲染原 ...
理解Flex itemRenderer(5)--效率
如果您要显示大量 itemRenderer-无论在 DataGrid 还是在 AdvancedDataGrid 中-如果无法有效编写这些 itemRenderer, 您的应用程序性能可能受到负面影响. ...
【后端过程记录】用flask搭建服务器作后端接收数据将base64字符串码解码为可读取文件载入训练好的模型进行预测
因为项目的原因了解到有一个python的flask框架,查了一下: 关于前端图片上传的canvas: 如下元素 <canvas id="canvas" width=" ...
炫酷！从未见过如此Q弹的Switcher
前言最近逛Dribbble的时候,看到了一个非常酷的Switcher动画,特别喜欢,本想着试着用代码在Android平台来实现一下,没想到已经有实现的版本,并且作者还写了文章分享,思路清晰,各个实现 ...
android string 原理,Android中的SpannableString,Spans以及TextView绘制原理
前言前段时间看过一篇实现类似新浪微博帖子显示(2)--话题.@好友.表情解析工具类类似这种富文本的显示我们一般首先就会想到SpannableString,原作者也是这样实现的,就想着整理一下相关 ...

canvas艺术字-扩展-闪烁效果

canvas艺术字-扩展-闪烁效果相关推荐

最新文章

热门文章