基于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>

　　效果截图：
　　流水灯时刻跑着，这里主要是绕圈圈

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

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

相关帖子

【分享】Linux系统下3种常用的网络测速工具!

WordPress显示当前文章分类下的最新文章

css3超酷的按钮鼠标经过特效

javascript怎么实现窗口置顶

浅谈Nodejs+nodemailer怎么发送邮件

JavaScript怎样实现点击出现图片效果

uni-app 利用canvas画简单海报并保存图片

使用原生querySelectorAll和forEach来实现点击切换

node Express学习之聊聊中间件

免插件、DZ内置JS轻松实现外链访问二次确认对话提示框

江南才子 LV4