基于canvas实现超炫酷的流水灯效果
更新时间：2021年05月20日 14:45:55 作者：sensus森森
这篇文章主要为大家详细介绍了基于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>
效果截图：
流水灯时刻跑着，这里主要是绕圈圈
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
这篇文章主要给大家介绍了关于Webpack中loader打包各种文件的相关资料，其中包括处理css文件、less文件、scss文件、url地址以及ES6高级语法的方法，需要的朋友可以参考下2019-09-09
这篇文章主要介绍了通过js、jquery实现的图片动画、图片动态切换 ,需要的朋友可以参考下2014-06-06
这篇文章主要给大家介绍了关于重学JS之显示强制类型转换的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用JS具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-06-06
JavaScript列表框listbox全选和反选的实现方法
这篇文章主要介绍了JavaScript列表框listbox全选和反选的实现方法,涉及javascript操作列表框listbox的技巧,非常具有实用价值,需要的朋友可以参考下2015-03-03
在正式开始之前，我想先说两句，理解javascript系列博文是通过带领大家分析javascript执行时的内存分配情况，来解释javascript原理，具体会涵盖javascript预加载，闭包原理，面象对象，执行模型，对象模型...,文章的视角很特别，也非常深入，希望大家能接受这种形式，并提供宝贵意见。2010-10-10
下面小编就为大家带来一篇基于Bootstrap分页的实例讲解(必看篇)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
下面小编就为大家带来一篇全面了解addEventListener和on的区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
项目中经常会使用到表格，数据量大的时候还需要进行分页，项目设计阶段，我选择了bootstrapTable的js插件，个人觉得这个框架非常好用，支持服务器端分页，此篇主要写的主要是关于服务器分页,需要的朋友可以参考下2016-12-12
本文给大家汇总了一下在我们日常开发微信项目的过程中，经常需要用到的一些js方法，都是些使用频率很高，而且非常简单的方法，这里推荐给大家。2015-03-03
这篇文章主要介绍了ES6新特性五之Set与Map的数据结构,结合实例形式分析了ES6中Set与Map的功能、定义、属性、结构与相关使用技巧,需要的朋友可以参考下2017-04-04
最新评论