×

canvas小应用:基于canvas的流水灯效果

作者:andy0012021.05.27来源:Web前端之家浏览:414评论:0
关键词:jscanvas

canvas小应用:基于canvas的流水灯效果

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>基于canvas超炫酷的流水灯效果 - Web前端之家https://www.jiangweishan.com/</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="/demo/js/jq.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>

看看效果吧!

温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/js2021571132132a3.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • qianduan

    这个跟H5做的很像,看上去用react实现起来要简单些。...

  • qianduan

    YYDS的文章,收藏了。...

  • 访客

    红红火火恍恍惚惚...

  • 跨境电商运营

    谢谢站长的文章已经解决问题了...

  • 跨境电商运营

    非常不错的文章下次还会再来!...

  • Web前端之家

    可以的,有时间会发些关于SEO相关的文章~...

  • s4f

    SEO很难啊,小编多发点类似文章吧!...

  • Web前端之家

    应该没什么问题吧,等待官宣,毕竟还没正式公开这个版本。...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2021 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.7 Valyria