canvas霓虹灯

最新推荐文章于 2022-09-23 09:11:23 发布
最新推荐文章于 2022-09-23 09:11:23 发布
阅读量759 收藏 1
点赞数
文章标签： canvas霓虹灯
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kingchanW/article/details/53556378
版权 


<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #can1{
            box-shadow: 0 0 10px yellow;
        }
    </style>
</head>

<body>
    <canvas id="can1" width="600" height="600"></canvas>

    <script type="text/javascript">
        var can1 = document.getElementById('can1');
        var ctx1 = can1.getContext('2d');
        var color = ["gray", "green", "red", "palegoldenrod", "hotpink", "darkblue"];
        function col(){
            ctx1.fillStyle = color[0];
            ctx1.fillRect(0, 0, 600, 600);
            ctx1.fillStyle = color[1];
            ctx1.fillRect(50, 50, 500, 500);
            ctx1.fillStyle = color[2];
            ctx1.fillRect(100, 100, 400, 400);
            ctx1.fillStyle = color[3];
            ctx1.fillRect(150, 150, 300, 300);
            ctx1.fillStyle = color[4];
            ctx1.fillRect(200, 200, 200, 200);
            ctx1.fillStyle = color[5];
            ctx1.fillRect(250, 250, 100, 100);
        }
        col();
        setInterval(function (){
            ctx1.clearRect(0,0,can1.width,can1.height);
            var temp = color[0];
            color[0] = color[1];
            color[1] = color[2];
            color[2] = color[3];
            color[3] = color[4];
            color[4] = color[5];
            color[5] = temp;
            col();
        },100);
    </script>
</body>

kingchanW
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
高级流水灯--水滴效果(渐变带拖尾效果)实现和讲解.pdf
07-20
高级流水灯--水滴效果(渐变带拖尾效果) 也许你会觉得流水灯很简单，但是如果让你设计出水滴效果的高级流水灯，你会吗？看了这个，也许你就会了。太漂亮了。
canvas+svg手电筒照明js特效
ICode联盟
08-14 183
canvas+svg手电筒照明特效。
canvas绘制简单的霓虹灯效果
weixin_30826761的博客
06-25 342
canvas简单动画分为三个步骤： 1、清除画布区域的内容； 2、重绘； 3、执行requestAnimationFrame(); 这个霓虹灯效果的demo，我没有用requestAnimationFrame();而是用的传统的setInterval;主要思路：画圆，画一堆圆，在一定时间间隔后，清除画布，再画一堆圆。 <canvas id="canvas">该浏...
canvas绘制聚光灯
风舞红枫的个人博客
03-05 377
canvas绘制聚光灯
html5 canvas 灯,HTML5 Canvas纵横交错的霓虹灯光
weixin_42521276的博客
06-25 158
JavaScript语言：JaveScriptBabelCoffeeScript确定var canvas = document.getElementById('canvas');ctx = canvas.getContext('2d'),requestAnimationFrame = window.requestAnimationFrame ||window.mozRequestAnimation...
HTML5 Canvas霓虹灯蜂巢特效特效代码
03-20
在这个“HTML5 Canvas霓虹灯蜂巢特效特效代码”中，我们主要探讨的是如何利用Canvas API实现一个具有霓虹灯效果的蜂巢六角网格动画。 首先，蜂巢六角网格是一种几何结构，由多个相互连接的六边形组成，这种结构在...
Canvas霓虹灯泡泡聚集动画特效
07-31
"Canvas霓虹灯泡泡聚集动画特效"是一个利用Canvas API实现的交互式动画，通过编程方式生成五彩斑斓的霓虹灯泡泡，并让它们在屏幕上动态地聚集、漂浮，为网页增添独特的视觉魅力。 首先，我们来看霓虹灯泡泡动画的...
HTML5 Canvas霓虹灯隧道动画特效特效代码
03-20
要创建HTML5 Canvas霓虹灯隧道动画，首先需要理解Canvas的基本概念。Canvas是一个基于矢量图形的二维画布，通过JavaScript来控制其内容的绘制。开发者可以通过`<canvas>`元素在HTML文档中引入画布，并使用JavaScript...
HTML5 Canvas霓虹灯隧道动画特效.zip
07-04
这个"HTML5 Canvas霓虹灯隧道动画特效"利用了Canvas API创建了一个独特的视觉体验，仿佛用户正在驶过一条充满霓虹灯光的隧道。这是一种常见的特效，常用于网站背景或者游戏元素，可以增加网站的互动性和吸引力。 ...
Canvas霓虹灯泡泡聚集动画特效.rar
08-06
在这个“Canvas霓虹灯泡泡聚集动画特效”中，我们将探讨如何利用Canvas API来实现这样的特效。 首先，霓虹灯效果通常是通过模拟光的发射、颜色渐变以及边缘模糊等特性来创造的。在Canvas上，我们可以通过设置不同的...
Canvas圆点灯光闪烁背景特效.zip
07-05
Canvas圆点灯光闪烁背景特效是一款基于canvas 2D画布绘制彩色的圆点一个个随机闪烁发光背景动画特效。
Unity Trail Renderer制作流星拖尾小例子
03-29
使用Trail Renderer制作流星拖尾demo，这个参考网上教程做的。在流星到达一定高度后渐隐然后销毁，通过设置其梯度alpha值渐变实现。
canvas制作呼吸灯
徐同保的专栏
09-06 1498
  &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;canvas制作呼吸灯&lt;/title&gt; &lt;style type="text/css"&amp
html中的边框线流水灯效果,基于canvas实现超炫酷的流水灯效果
weixin_28760171的博客
06-10 588
本文实例为大家分享了基于canvas实现超炫酷的流水灯效果的具体代码，供大家参考，具体内容如下基于canvas超炫酷的流水灯效果*{margin: 0;padding: 0;}canvas{border: 1px solid red;width: 100%;height: 100%;}您的浏览器不支持canvas标签。var canvas = document.getElementById("my...
2020-12-05
netcy的专栏
12-05 218
利用canvas阴影功能与双线技巧绘制轨道交通大屏项目效果 前言 近日公司接到一个轨道系统的需求，需要将地铁线路及列车实时位置展示在大屏上。既然是大屏项目，那视觉效果当然是第一重点，咱们可以先来看看项目完成后的效果图。 可以看到中间线路里轨道的效果是非常炫酷的，那么本文的主要内容就是讲解如何在canvas上绘制出这种效果。 分析设计稿 先看看设计稿中的轨道效果 程序员解决问题时经常喜欢用到的方法是把一个大问题拆解为若干个小问题然后逐一处理，也就是分而治之，所以我在思考这个轨道效果的实现时，也是先考虑到将
炫酷流光丝带网页背景canvasjs特效
ICode联盟
09-23 379
炫酷的HTML5流光丝带网页背景特效，基于canvas实现的背景特效。
canvas绘制探光灯
风舞红枫的个人博客
03-05 182
canvas绘制探光灯
基于canvas超炫酷的流水灯效果
森森
03-21 3163
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;基于canvas超炫酷的流水灯效果&lt;/title&gt; &lt;style&gt; *{ margin: 0
canvas绘制霓虹灯-带光晕
caoxinjian423的博客
11-06 890
<!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: .
html5的canvas做灯带效果
最新发布
07-25
要使用 HTML5 的 canvas 实现灯带效果，可以通过绘制渐变和动画来实现。下面是一个简单的示例代码，演示了如何创建一个彩虹色的灯带效果： ```html <!DOCTYPE html> <html> <head> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="myCanvas" width="400" height="200"></canvas> <script> const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0); gradient.addColorStop(0, 'red'); gradient.addColorStop(0.2, 'orange'); gradient.addColorStop(0.4, 'yellow'); gradient.addColorStop(0.6, 'green'); gradient.addColorStop(0.8, 'blue'); gradient.addColorStop(1, 'purple'); let position = 0; function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = gradient; ctx.fillRect(position, 0, 100, 200); position++; if (position > canvas.width) { position = -100; } requestAnimationFrame(draw); } draw(); </script> </body> </html> ``` 在上述代码中，我们首先创建了一个 canvas 元素，并给它一个 id 为 "myCanvas"。然后，通过 JavaScript 获取到该 canvas 元素的上下文对象 ctx，以便进行绘制操作。接下来，我们创建了一个线性渐变对象 gradient，并通过 addColorStop 方法添加了多个颜色点，实现了彩虹色效果。 在 draw 函数中，我们使用 clearRect 方法清空画布，并使用 fillRect 方法绘制一个矩形，并将渐变对象作为填充样式。然后，每次调用 draw 函数时，我们将矩形的位置 position 向右移动一步，形成动画效果。 最后，通过调用 requestAnimationFrame 方法，实现了连续不断地绘制动画效果。整个画布的宽度会根据需要进行调整。 你可以根据自己的需求修改渐变色和动画效果来实现不同的灯带效果。希望对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值