优秀的canvas背景特效网站(基于canvas实现超炫酷的流水灯效果)
类别:编程学习 浏览量:2637
时间:2022-01-27 01:34:46 优秀的canvas背景特效网站
基于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>
效果截图:
流水灯时刻跑着,这里主要是绕圈圈
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- canvas实现字体粒子爆炸特效(javascript canvas实现雨滴效果)
- html5中canvas标签(html5 canvas绘制网络字体的常用方法)
- canvas画布多次渲染失败(深入了解canvas在移动端绘制模糊的问题解决)
- canvas怎么画特效(canvas中普通动效与粒子动效的实现代码示例)
- canvas绘制分辨率(通过canvas转换颜色为RGBA格式及性能问题的解决)
- htmlcanvas的使用(html2canvas生成清晰的图片实现打印的示例代码)
- canvas 中文字体(详解canvas绘制网络字体几种方法)
- canvas图片裁剪插件(浅析图片上传及canvas压缩的流程)
- 如何使用html5的canvas图(html5 canvas实现给图片添加平铺水印)
- html5 canvas 特效(JavaScript canvas实现流星特效)
- js使用canvas(JavaScript canvas实现七彩时钟效果)
- jscanvas画折线图(js+canvas实现代码雨效果)
- canvas如何将一组数据生成柱子图(Canvas环形饼图与手势控制的实现代码)
- canvas技术开发(用canvas显示验证码的实现)
- html5canvas画图有什么用(Html5基于canvas实现电子签名并生成PDF文档)
- canvas进阶教程(原生canvas制作画图小工具的踩坑和爬坑)
- ()
- 800壮士拼死拖住30万日军 八佰 的真实历史,誓与阵地共存亡(800壮士拼死拖住30万日军)
- 演员陈创,火于 哮天犬 ,颠峰于 福贵 ,现状却令人唏嘘(演员陈创火于哮天犬)
- 幼小衔接-20以内看图读数 写数 数的组成练习题(幼小衔接-20以内看图读数)
- 你只要花上20天记单词,英语成绩就能从57提到100(你只要花上20天记单词)
- 夕云天际飞,亢龙化太极(夕云天际飞亢龙化太极)
热门推荐
- mysql主机双向复制配置(浅析MySQL并行复制)
- echarts可视化(swiper+echarts实现多个仪表盘左右滚动效果)
- hive入门零基础教程(手把手教你在腾讯云上搭建hive3.1.2的方法)
- wordpress如何在文章中自定义html(wordpress添加Html5的表单验证required方法小结)
- C# 扩展方法
- java温度转换自动识别(Apache Calcite 实现方言转换的代码)
- vue自定义组件定义事件(基于Vue实现自定义组件的方式引入图标)
- dedecms频道封面不能修改内容(dedecms按栏目名首字母/数字排序输出的实现方法)
- mysql数据库基础练习(最全50个Mysql数据库查询练习题)
- dockergitlab服务器搭建(基于Docker部署GitLab环境搭建的方法步骤)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9