jscanvas背景色(JavaScript canvas实现代码雨效果)
类别:编程学习 浏览量:2807
时间:2021-11-08 16:23:24 jscanvas背景色
JavaScript canvas实现代码雨效果本文实例为大家分享了canvas实现代码雨效果的具体代码,供大家参考,具体内容如下
先看效果图
这个效果图是不是像极了以前电影里面的黑客技术,看起来蛮难的,其实操作起来还是挺简单的。
canvas其实就是画布的意思
首先我们得有一个画布
<body> <canvas id="canvas"></canvas> </body>
再设这样一个背景
HTML部分
<body> <canvas id="canvas"></canvas> <li></li> </body>
CSS部分
<style> *{ margin: 0; padding: 0; } #canvas{ overflow: hidden; position: absolute; z-index: 1; } li{ width: 480px; height: 280px; border-radius: 50%; background-image: url(img/第八天素材.jpg" alt="jscanvas背景色(JavaScript canvas实现代码雨效果)" border="0" />
后面就是JS部分
一个画布,一个画笔,还有给画布一个宽高
<script> var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var width = window.innerWidth; var height = window.innerHeight; canvas.height = height; canvas.width = width; </script>
详细代码如下:
<script> var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var width = window.innerWidth; var height = window.innerHeight; canvas.height = height; canvas.width = width; //设置一个 字体大小的变量 var fontsize = 16; //设置一个变量用来存放 一整行能够同时容纳多少个字 var count = width/fontsize; console.log(count); //创建一个数组 用来存放字的 var arr = []; for(var i = 0; i < count; i++){ arr.push(0); console.log(arr); } //用数组的方式 存放数据 var stringarr = "I Love You" function show(){ //开始画画 context.beginPath(); context.fillRect(0,0,width,height); //透明度 context.fillStyle = "rgba(0,0,0,0.05)"; //字体得颜色 context.strokeStyle = "chartreuse"; for( var i =0; i<arr.length; i++ ) { var x = i*fontsize; var y = arr[i]*fontsize; var index = Math.floor(Math.random()*stringarr.length); context.strokeText(stringarr[index],x,y); if( y >=height&&Math.random()>0.99 ){ arr[i]=0; } arr[i]++; } context.closePath(); } show();//调用函数 var timer = setInterval(show,30); </script>
如有不足,请多指导。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- js 原生事件代理(如何利用原生JS实现触摸滑动监听事件)
- vue前台解析pdf文件流(Vue实现在线预览pdf文件功能利用pdf.js/iframe/embed)
- Js如何判断浏览器类型和版本
- js怎么转拼音(js实现中文转拼音的完整步骤记录)
- python将对象转换成json(python对象与json相互转换的方法)
- Extjs中FieldSet的收缩和展开
- node.js express 上线(node+express实现分页效果)
- dedecms中的有些功能如何修改(织梦DEDECMS中用JS方式调用评论总数的技巧)
- js时间日期处理
- console.table调试JSON对象或字符串
- extjs tabPanel的用法
- jspromise原理(JavaScript使用promise处理多重复请求)
- vuejs过滤器使用教程(vue3删除过滤器的原因)
- js 出现cannot find function(Fatal error: Call to a member function read on a non-object in 错误解决方法)
- ExtJs常用代码片段
- JS让打开的窗口居中
- 七夕取消是什么梗(七夕取消是什么梗)
- 这竟然是捏出来的 20种橡皮泥玩法让你轻松hold住魔娃(这竟然是捏出来的)
- 自制橡皮泥(自制橡皮泥)
- 还在卖 禁药西布曲明网上论斤卖(还在卖禁药西布曲明网上论斤卖)
- 微商在朋友圈热卖的 DL减肥咖啡 含违禁药物,你还敢买吗(微商在朋友圈热卖的)
- 八一节,说说中国女兵(八一节说说中国女兵)
热门推荐
- MVC中数据验证
- 用python查看运行进程(在Python运行时动态查看进程内部信息的方法)
- jq控制css样式(css3模拟jq点击事件的实例代码)
- 如何增大docker内存使用(docker 内存监控与压测方式)
- vue过滤器filters怎么用(如何使用vue过滤器filter)
- 使用docker在linux环境中部署springboot包的教程(使用docker在linux环境中部署springboot包的教程)
- sql server中使用xp_readerrorlog查看错误日志
- dedecms怎么判断授权(DedeCms模板防盗以及安全设置的一些小技巧)
- nginx反向代理spring boot(Nginx+SpringBoot实现负载均衡的示例)
- laravel框架入门项目(在laravel框架中使用model层的方法)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9