优秀的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绘制分辨率(通过canvas转换颜色为RGBA格式及性能问题的解决)
- canvas两种形式动画(用canvas做一个DVD待机动画的实现代码)
- jscanvas画折线图(js+canvas实现代码雨效果)
- html5canvas图形怎么打印(HTML5 Canvas 实现K线图的示例代码)
- canvas绘制二进制图片(Canvas获取视频第一帧缩略图的实现)
- html5canvas怎么改扇形起始角(HTML5 Canvas实现放大镜效果示例)
- canvas指定区域生成图片(canvas实现图片镜像翻转的2种方式)
- canvas 中增加组件(如何在Canvas中添加事件的方法示例)
- 用html5的canvas绘制剪裁图像(Html5 canvas画图白板踩坑)
- canvas进阶教程(原生canvas制作画图小工具的踩坑和爬坑)
- canvas 绘图解决方案(高清屏下canvas重置尺寸引发的问题的解决)
- html5的canvas代码(H5最强接口之canvas实现动态图形功能)
- canvas图片裁剪(使用canvas压缩图片上传的方法示例)
- 优秀的canvas背景特效网站(基于canvas实现超炫酷的流水灯效果)
- htmlcanvas的使用(html2canvas生成清晰的图片实现打印的示例代码)
- html5canvas曲线图例子(html5利用canvas实现颜色容差抠图功能)
- 仙女们的私藏鲜法大PK 鲜香切块牛肉(仙女们的私藏鲜法大PK)
- 天热没胃口 这道菜开胃又下饭,2个小技巧新手一学就会(这道菜开胃又下饭)
- 指天椒紫苏爆炒牛肉(指天椒紫苏爆炒牛肉)
- 谷雨前,吃牛羊肉别忘了吃河鲜,除湿还清热,加紫苏一炒特解馋(吃牛羊肉别忘了吃河鲜)
- 紫苏牛肉锅里滚一滚,香的鼻子都要掉了(紫苏牛肉锅里滚一滚)
- 每天都吃水果的好处(每天吃水果的好处与功效)
热门推荐
- docker插件容器使用(Docker容器开jupyter不能访问到的解决方法)
- vue element 权限管理(Vue Element前端应用开发之功能点管理及权限控制)
- python调用支付宝支付接口(python实现支付宝转账接口)
- dedecms本地搭建(DEDECMS图文分离存放在另一个服务器实现方法)
- 织梦cms内容模型管理详解(织梦CMS系统TAG标签页面包屑导航的调用方法)
- sqlserver仲裁状态(使用 SQL 服务器时,"评估期已过期"错误消息解决方法)
- js手写数组去重(JS对象数组去重的3种方法示例及对比)
- 火狐查看json数据
- django参数配置(详解重置Django migration的常见方式)
- css3 box-sizing
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9