基于canvas实现超炫酷的流水灯效果

本文实例为大家分享了基于canvas实现超炫酷的流水灯效果的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>基于canvas超炫酷的流水灯效果</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        canvas{
            border: 1px solid red;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body  onselectstart="return false">
        <!-- 添加canvas标签，并加上红色边框以便于在页面上查看 -->
        <canvas id="myCanvas" >
        您的浏览器不支持canvas标签。
        </canvas>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var cx1 = canvas.offsetLeft;
    var cy1 = canvas.offsetTop;
    var cx2 = canvas.offsetLeft + canvas.offsetWidth;
    var cy2 = canvas.offsetTop + canvas.offsetHeight;
    var bbox = canvas.getBoundingClientRect();
    $(function(){
        var direction = 'right',x = y = right_count = down_count = left_count = up_count = 0;
        ctx.beginPath(); //开始一个新的绘制路径
        ctx.moveTo(x, y); //定义直线的起点坐标为(0,0)
        setInterval(function(){
            ctx.strokeStyle = '#'+Math.floor(Math.random()*16777215).toString(16);
            switch(direction){
                case 'right':
                    if(x >= 300 - right_count){
                        direction = 'down';
                        right_count++;
                    }else{
                        x++;
                    }
                    break;
                case 'down':
                    if(y >= 150 - down_count){
                        direction = 'left';
                        down_count++;
                    }else{
                        y++;
                    }
                    break;
                case 'left':
                    if(x <= left_count){
                        direction = 'up';
                        left_count++;
                    }else{
                        x--;
                    }
                    break;
                case 'up':
                    if(y <= up_count + 1){
                        direction = 'right';
                        up_count++;
                    }else{
                        y--;
                    }
                    break;
            }
            ctx.lineTo(x, y);
            ctx.lineCap = 'round';
            ctx.lineWidth = 1; //设置线段的宽度
            ctx.stroke(); //沿着坐标点顺序的路径绘制直线
        }, 1);
    })
</script>
</body>
</html>

效果截图：

流水灯时刻跑着，这里主要是绕圈圈

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • canvas实现探照灯效果

    canvas中的clip()方法用于从原始画布中剪切任意形状和尺寸.一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内(不能访问画布上的其他区域) 也可以在使用clip()方法前通过使用save()方法对当前画布区域进行保存,并在以后的任意时间通过restore()方法对其进行恢复 接下来使用clip()方法实现一个探照灯效果 <button id="btn">变换</button> <button id="con">

  • 基于canvas实现超炫酷的流水灯效果

    基于canvas实现超炫酷的流水灯效果

    本文实例为大家分享了基于canvas实现超炫酷的流水灯效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基于canvas超炫酷的流水灯效果</title> <style> *{ margin: 0; padding: 0; } canvas{ border: 1px solid red; wi

  • JS+canvas画布实现炫酷的旋转星空效果示例

    JS+canvas画布实现炫酷的旋转星空效果示例

    本文实例讲述了JS+canvas画布实现炫酷的旋转星空效果.分享给大家供大家参考,具体如下: canvas是html5的新标签,其画布功能尤为强大.当然了canvas在IE10以下浏览器是不兼容的,所以呢为了特效肯定是牺牲一定的兼容性.这里呢,分享一个基于canvas开发的浩瀚星河插件,其实这个源代码是网上下载的,我把它整合了一下,重新封装一些参数提供更多的可改项. 首先引入两个javascript脚本,一个是jquery插件,另一个是封装好的cosmos_canvas.js <script s

  • 基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)

    基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)

    这是一款基于jQuery的弹出对话框插件,这个jQuery对话框插件的最大特点是弹出和关闭都带有非常炫酷的动画特效,比如旋转飞入.上下抖动飞入等.效果图如下: 效果演示    源码下载 html代码: <div class="container"> <h1>jQuery gDialog Plugin Exampels</h1> <button class="btn demo-1">Alert Dialog Box<

  • 自己用python做的一款超炫酷音乐播放器

    自己用python做的一款超炫酷音乐播放器

    目录 前言 一.核心功能设计 UI设计排版布局 关键字音乐列表爬虫 音乐播放 附加功能 二.实现步骤 1. UI设计排版布局 2. 关键字音乐列表爬虫 3. 音乐播放 4. 附加功能 三.结束语 前言 晚上坐在电脑面前,想着一边撸代码,一边听音乐.搜了搜自己想听的歌,奈何好多歌曲都提示需要版权,无法播放! 没办法,想听歌还是得靠自己解决!今天就一起用python自制一款炫酷的音乐播放器吧~ 首先一起来看看最终实现的音乐播放器效果: 下面,我们开始介绍这个音乐播放器的制作过程. 一.核心功能设计

  • 五个基于JS实现的炫酷登录页面

    五个基于JS实现的炫酷登录页面

    目录 1.炫酷星空登录 2.动态云层登录 3.深海灯光水母登录 4.炫酷蛛网登录 5.彩色气泡登录 1.炫酷星空登录 实现代码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>运营系统登录页</title> <link href=

  • pyhthon绘制超炫酷的心形线星形线摆线

    pyhthon绘制超炫酷的心形线星形线摆线

    目录 摆线 外摆线和心脏线 内摆线与星形线 摆线 最简单的旋轮线就是摆线,指圆在直线上滚动时,圆周上某定点的轨迹. 设圆的半径为 r ,在x轴上滚动  x距离则意味着旋转了 x \ r​ 弧度,则其滚动所产生的摆线如下 r = 1 theta = np.arange(0,6.4,0.1) xCircle0 = np.cos(theta) yCircle0 = 1+np.sin(theta) fig = plt.figure(figsize=(15,4)) ax = fig.add_subplot

  • python绘制超炫酷动态Julia集示例

    python绘制超炫酷动态Julia集示例

    目录 前言 Mandelbrot集 无限缩放 Julia集 前言 此Julia非彼Julia,指的是对于某复数 c c c,使得迭代式 f ( z ) = z 2 + c f(z)=z^2+c f(z)=z2+c收敛的复数 z z z的集合.例如,当 c = 0 c=0 c=0时,那么其收敛区间为 z 2 < 1 z^2<1 z2<1的单位圆,对应的 c c c的Julia集便是 cos ⁡ θ + i sin ⁡ θ \cos\theta+i\sin\theta cosθ+isinθ.

  • Android 开发之BottomBar+ViewPager+Fragment实现炫酷的底部导航效果

    Android 开发之BottomBar+ViewPager+Fragment实现炫酷的底部导航效果

    BottomBar BottomBar是Github上的一个开源框架,因为从1.3.3开始不支持fragments了,要自己配置,弄了很久,不管是app的fragment还是V4 的程序总是总是闪退.于是就用这种方式实现了,效果还不错.github有详细说明,多余的就不说了. 这个roughike是这个项目的所有者(大神致敬). 我用的是Android studio开发,fragment全部导的V4的包(以为最开始就支持的是v4的,后面也支持了app.fragment). 首先是dependen

  • Android自定义PopupWindow实现炫酷的IOS对话框效果

    前言: 最近在使用IOS系统的过程中发现IOS底部弹出框甚是漂亮,大气,上档次,于是乎就想啊能不能在Android中实现类似的对话框呢?你说,这不是废话吗,除了一些极少数的系统级的不能模仿外(版权)还有啥不能依瓢画葫芦的呢,所以啊,这篇文章将介绍如何在Android中实现高仿IOS对话框效果,先上图,给大家养养眼: 大家在看到上面的对话框时有没有想到简单的实现思路呢?我这里给出的思路是我们可以自定义一个PopupWindow,然后设置我们的布局.这里的布局很有技巧哦,那就是对话框中间的透明隔断区

  • 基于jquery和svg实现超炫酷的动画特效

    基于jquery和svg实现超炫酷的动画特效

    今天给大家分享一款基于jquery和svg超炫的网页动画.这款动画效果非常炫.下面还有重播.慢速.和反向动画按钮.效果非常漂亮.一起看下效果图: 实现的代码. html代码: 复制代码 代码如下: <div id="intro">         <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"          

随机推荐