当前位置:编程学习 > > 正文

优秀的canvas背景特效网站(基于canvas实现超炫酷的流水灯效果)

时间:2022-01-27 01:34:46类别:编程学习

优秀的canvas背景特效网站

基于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>  
    
  • 效果截图:

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

    优秀的canvas背景特效网站(基于canvas实现超炫酷的流水灯效果)

    优秀的canvas背景特效网站(基于canvas实现超炫酷的流水灯效果)

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    标签:
    上一篇下一篇

    猜您喜欢

    热门推荐