本文实例为大家分享了基于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>
效果截图：
流水灯时刻跑着，这里主要是绕圈圈
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
© 版权声明
THE END
暂无评论内容