jscanvas画折线图(js+canvas实现代码雨效果)
类别:编程学习 浏览量:2378
时间:2021-10-18 11:54:50 jscanvas画折线图
js+canvas实现代码雨效果本文实例为大家分享了js+canvas代码雨效果的具体代码,供大家参考,具体内容如下
代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin: 0px; padding: 0px; } html,body{ height: 100%; width: 100%; } #canvas{ display: block; } </style> </head> <body> <canvas id="canvas"></canvas> <script type="text/javascript"> var canvas = document.getElementById('canvas') var c= canvas.getContext('2d') var cw = canvas.width = window.innerWidth var ch = canvas.height = window.innerHeight var str = [1,2,3,4,5,6,7,8,9,0,'q','w','e','r','t','y','u','i','a','c','d','f','g','h','j','l'] var init = function(){ this.x = Math.random()*cw this.y = 0 this.content1 =Math.random()*15 this.speed = Math.random()*5+20 this.add = function(){ this.y+=this.speed } this.reset1 = function(){ this.x= Math.random()*cw this.y = 0 } } //定义一个随机色 var gl = c.createLinearGradient(0, 0, cw, ch); gl.addColorStop(0, 'red'); gl.addColorStop(.5, 'yellow'); gl.addColorStop(1, 'cyan'); var arr=[] for(var i=0;i<20;i++){ arr.push(new init()) } setInterval(function(){ c.fillStyle = 'rgba(0,0,0,0.05)' c.fillRect(0,0,cw,ch) //上面的两句是给一个背景,放在计时器里面是为了每运行一次,就重新绘画一次 //用来清空好画布 //1,yong rgba()来表示颜色是为了给一个透明度,新画上去的画布没有完全覆盖 //以前的画布,所以有个渐变的效果 for(var i=0;i<arr.length;i++){ c.fillStyle = gl c.font = '30px 微软雅黑' c.fillText(str[i],arr[i].x,arr[i].y) //让他落到底部再回来 if(arr[i].y>ch-20){ arr[i].reset1() } arr[i].add() } // },1000/60) </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- canvas如何在网页上画图形(canvas绘制图片drawImage使用方法)
- canvas图片填充位置(手摸手教你用canvas实现给图片添加平铺水印的实现)
- 使用canvas的好坏(关于canvas绘制模糊问题的解决方法)
- canvas心形水波(Canvas波浪花环的示例代码)
- html5的canvas图形绘制技术(导出HTML5 Canvas图片并上传服务器功能)
- canvas 裁剪画布(Canvas图片分割效果的实现)
- canvas绘图问题(记一次高分屏下canvas模糊问题)
- canvas画布多次渲染失败(深入了解canvas在移动端绘制模糊的问题解决)
- canvas如何将一组数据生成柱子图(Canvas环形饼图与手势控制的实现代码)
- canvas绘制二进制图片(Canvas获取视频第一帧缩略图的实现)
- canvas小程序海报(使用canvas生成含有微信头像的邀请海报没有微信头像问题)
- canvas绘制动态线条(5分钟实现Canvas鼠标跟随动画背景)
- canvas 中增加组件(如何在Canvas中添加事件的方法示例)
- 优秀的canvas背景特效网站(基于canvas实现超炫酷的流水灯效果)
- canvas绘制分辨率(通过canvas转换颜色为RGBA格式及性能问题的解决)
- html使用canvas画矩形(CSS、SVG和canvas分别实现文本文字纹理叠加效果)
- 每周一首古诗 《绝句》(每周一首古诗绝句)
- 蓝色代表什么(蓝色代表什么性格的人)
- 红色代表什么(红色代表什么情感和含义)
- 南宋志南和尚绝句 杨柳风似庙中来(南宋志南和尚绝句)
- 今天要穿什么颜色(今天要穿什么颜色的衣服最吉利)
- 一道高中题-求杯子的高度(一道高中题-求杯子的高度)
热门推荐
- linux怎么恢复删除的数据(Linux利用lsof/extundelete工具恢复误删除的文件或目录)
- mysql开启审计日志会导致性能下降(MySQL 一则慢日志监控误报的问题分析与解决)
- 修改阿里云ecs密码(阿里云ECS实例设置用户root密码和远程连接的方法)
- python多线程并发使用场景(对python多线程SSH登录并发脚本详解)
- html5新增全局属性(HTML5自定义属性的问题分析)
- python怎么转换jar包(利用python脚本如何简化jar操作命令)
- python的条件判断和循环(对Python中的条件判断、循环以及循环的终止方法详解)
- laravel框架入门项目(在laravel框架中使用model层的方法)
- ftp服务器怎么搭建linux(Linux下使用vsftp搭建FTP服务器附参数说明)
- 宝塔面板必须安装哪些软件(宝塔面板安装后必要的安全设置说明)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9