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>
如有不足,请多指导。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- php抽奖功能(php+lottery.js实现九宫格抽奖功能)
- js绘制平滑路径(如何利用Javascript生成平滑曲线详解)
- js中Math对象的用法
- js 定时切换图片(JavaScript定时器实现无缝滚动图片)
- js网页截图(JS如何实现页面截屏功能实例代码)
- sqlserver技术文档(sql server2016里面的json功能浅析)
- html5长图拖动(html5 拖拽及用 js 实现拖拽功能的示例代码)
- js setTimeout
- vue.js入门教学第15讲(Vue.js 使用AntV X6的示例步骤)
- 自己做的弹珠小游戏(JS实现简单打砖块弹球小游戏)
- JS中prototype
- lazyload延迟加载有什么影响(利用原生JS实现懒加载lazyLoad的三种方法总结)
- mysqljson字段查询(Mysql 查询JSON结果的相关函数汇总)
- 用js做一个计算器(使用JS实现简易计算器)
- jsarray操作技巧(JS数组reduce你不得不知道的25个高级用法)
- js判断对象是否存在
- 美国数十万加仑牛奶倒下水道怎么回事 原因曝光令人心痛(美国数十万加仑牛奶倒下水道怎么回事)
- 探索中国神秘文字(探索中国神秘文字)
- 重温《蜗居》 宋思明选中海藻为红颜知己,纯属巧合,与爱无关(宋思明选中海藻为红颜知己)
- 越南旅游攻略(越南旅游攻略自由行)
- 成都旅游攻略(成都旅游攻略自由行最佳线路)
- 给儿童吃什么最好(给儿童吃什么最好消化)
热门推荐
- dede图片上传问题(DEDE图片集上传图片时出错显示FILEID的解决方法)
- sqlserver连接字符串函数(SQL SERVER 2012新增函数之字符串函数FORMAT详解)
- mongodb中mapreduce实例
- react实现js控制样式(React + Threejs + Swiper 实现全景图效果的完整代码)
- Uncaught TypeError: jQuery.handleError is not a function
- es6常用的数组方法(ES6中Set与WeakSet集合的深入讲解)
- docker开源软件(5款超好用的开源 Docker工具强烈推荐)
- php常见的数组函数(用php定义一个数组最简单的方法)
- css !important的用法
- mac鼠标怎么实现触摸板功能(鼠标滚轮事件和Mac触控板双指事件)