故里桃花落无踪,小楼轩窗山影重。若见瘦湖病西子,凋零秋风映山红。正是荷花成熟的季节,一朵朵荷花含苞怒放,满田野里的荷田闪烁着金光,一簇簇的荷花有的带着水珠乍开,有的含苞吐蕾,有的像个含羞的少女似开非开。
本文实例为大家分享了基于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实现超炫酷的流水灯效果请关注haodaima.com其它相关文章!