• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文实例为大家分享了基于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人参与评论

请发表评论

全部评论

专题导读
上一篇:
浅谈JS如何写出漂亮的条件表达式发布时间:2022-02-05
下一篇:
vue项目实现左滑删除功能(完整代码)发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap