canvas之霓虹灯

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>霓虹灯</title><style>* {padding: 0;margin: 0;}html, body {height: 100%;}#canvas {background: #000;}</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>const canvas = document.getElementById('canvas')canvas.width = window.innerWidthcanvas.height = window.innerHeightconst ctx = canvas.getContext('2d')// 颜色数组const colors = ['red', 'yellow']const dashOffset = [0, 6]const states = [0, 1]const draw = () => {ctx.save()// 偏移坐标系ctx.beginPath()ctx.strokeStyle = colors[states[0]]ctx.lineWidth = 3ctx.setLineDash([6])ctx.lineDashOffset = dashOffset[states[0]]ctx.font = 'bold 200px arial'ctx.shadowColor = 'orange'ctx.shadowBlur = 30ctx.strokeText('canvas', 80, 250)for (let i = 8; i > 0; i -= 1) {ctx.shadowBlur = ictx.strokeText('canvas', 80, 250)}ctx.restore()}setInterval(() => {ctx.clearRect(0, 0, canvas.width, canvas.height)draw()states.reverse()}, 500)
</script>
</body>
</html>

效果如下：

canvas之霓虹灯相关推荐

canvas绘制简单的霓虹灯效果
canvas简单动画分为三个步骤: 1.清除画布区域的内容: 2.重绘: 3.执行requestAnimationFrame(); 这个霓虹灯效果的demo,我没有用requestAnimationF ...
html霓虹灯效果图,利用HTML5实现Canvas霓虹灯蜂巢特效
特效描述:利用HTML5实现 Canvas 霓虹灯蜂巢特效.利用HTML5实现Canvas霓虹灯蜂巢特效代码结构 1. HTML代码 /* because me lazy */ Object.ge ...
canvas动画科技园_Canvas 写的酷炫动画代码分析
霓虹灯线形成的自发六边形,随机性生成火花在看这篇文章时,里面有个动画的示例(如上图),然后感觉有点很酷炫,就打算了解一下怎么写的.( 先上代码示例链接) 前景提要需要先确保你还记得三角函数的知识. ...
html5显示状态灯,如何使用css3+html5来制作文字霓虹灯效果
使用css3+html5来制作文字霓虹灯效果的特点文字带有闪烁的霓虹灯动画,且文字选中时也有很酷的动画特效: 文字可动态输入,且输入的文字实时渲染霓虹灯特效. 使用css3+html5来制作文字霓虹 ...
CSS3霓虹灯文字特效
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>CSS ...
SeniorUI0402_LinearGradient线性渐变：霓虹灯文字
高级UI汇总 SeniorUI04_Paint高级渲染Shader使用 ###1 Effect Picture ###2 Demo MyGradientView ###3 Require ...
Android霓虹灯文字控件
霓虹灯文字.gif 首先自定义一个控件继承TextView,使用LinearGradient进行渲染 @Overrideprotected void onSizeChanged(int w, int ...
炎炎夏日，快用代码下场雨ヽ｀☂ヽ｀canvas
一.先看效果(源码在最后): 哗啦啦啦我的B站地址~效果演示更清晰图片展示,因为图片限制5m大小,所以演示不太多: 二.实现过程(可一步一步实现): 因为雨是重点,所以中间 logo 部分就不详细 ...
html霓虹灯效果图,如何使用css3+html5来制作文字霓虹灯效果（付完整代码）
在科技日益发展的今天,人们对于审美越来越挑剔,这就要求我们对于前端开发的态度更加的严谨的同时,需要加入新鲜的元素,以达到吸引目光的目的.那么今天本文带大家了解一下如何使用css3+html5来制作文字 ...

canvas之霓虹灯

canvas之霓虹灯

canvas之霓虹灯相关推荐

最新文章

热门文章