canvas的雨滴特效

var canvas = document.querySelector(".rain");//获得类（获得id用#rain）ctx = canvas.getContext("2d");//拿到2d画笔var aRain = [];var wh = canvas.height = window.innerHeight;//不用css装饰来改变画布的大小，不能全屏。改变属性
var ww = canvas.width = window.innerWidth;//监听器，改变大小后，画布跟着改变
window.onresize=function () {wh = canvas.height = window.innerHeight;ww = canvas.width = window.innerWidth;
}//获得一个最小值到最大值的一个随机数
function random(min,max) {return Math.random()*(max-min)+min;
}//类似于java的类，构造方法
function Rain() {}//基因，为rain添加属性和方法
Rain.prototype={//初始化方法，初始位置速度与落下时圆的半径init:function () {this.x = random(0,ww);//最开始的x坐标与y坐标this.y = 0;this.h = random(0.8*wh,0.9*wh);//设置最后落地的距离，不能落出屏幕this.r = 1; //最开始圆的半径this.vr = 1;//半径增长速度this.vY = random(4,5);//下落速度},//画方法draw:function () {//当小于h时，画出雨滴（矩形）if(this.y<this.h){ctx.beginPath();//重新（抬笔）下笔ctx.fillStyle="white";// ctx.fillStyle="#31f7f7";ctx.fillRect(this.x,this.y,4,10);}//反之画圆else {ctx.beginPath();ctx.strokeStyle = "white";// ctx.strokeStyle="#31f7f7";ctx.arc(this.x,this.y,this.r,0,2*Math.PI);ctx.stroke();}},//移动函数move: function () {//小于h时，加y实现移动if(this.y<this.h){this.y+=this.vY;}//实现爆炸效果else {//小于最大半径，画空心的圆if(this.r<80){this.r+=this.vr;}//调用init函数，（结束生命后，又重新开始,将自己回到天上，天上随机位置，等待再一次的调用）else {this.init();}}//提出画的函数，使代码更精简this.draw();}
}//创造雨滴
function createRain(num) {for(var i=0;i<num;i++){//间隔多少时间执行一次某个函数（使雨滴逐渐出现而不是一下出现），并把它存入数组，方便后面的操作setTimeout(function () {var rain = new Rain();rain.init();rain.draw();aRain.push(rain);},300*i); //ms}
}//开始
createRain(60);//创建雨滴，雨滴创建出的时间不是相同，进入下一个函数
//开始取出数组中的雨滴，调用move方法，开始画
//结束之后重置自己的属性，再次等待被调用，实现无穷的雨//间隔多少时间就执行某个函数（与setTimeout区别，一直执行，不会停止）
setInterval(function () {ctx.beginPath();// ctx.clearRect(0,0,ww,wh);ctx.fillStyle="rgba(0,0,0,0.05)";ctx.fillRect(0,0,ww,wh);for(var item of aRain){item.move();}},1000/60);

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{margin: 0;}canvas{display: block;/*需使用block，其他有行间距*/background-color: black;}</style>
</head>
<body>
<canvas class="rain"></canvas><script src="../static/rain.js"></script>
</body>
</html>

canvas的雨滴特效相关推荐

js+canvas实现雨滴特效
给大家分享一下如何用js和canvas实现炫酷的雨滴特效思路先准备好开发工具,我用的是HBuilderX,当然也可以用Notepad等其它代码编辑器.还要了解一下canvas标签,其实就是一张画布 ...
canvas 雨滴特效
一.雨滴特效需求雨滴从窗口顶部随机下落到达底部将呈现波纹逐渐散开变淡直到消失,雨滴特效随窗口变化自适应二.雨滴实现思路 1. 用面向对象的思维首先创建canvas画布 ,绘制一个雨滴的初始化形状 ...
html5怎么实现雨滴效果,HTML5实现晶莹剔透的雨滴特效
HTML5雨滴特效 img { display: none; } body { overflow: hidden; } #canvas { position: absolute; top: 0px; ...
html雨滴状的图案代码,HTML_HTML5实现晶莹剔透的雨滴特效，复制代码代码如下: html - phpStudy...
HTML5实现晶莹剔透的雨滴特效复制代码代码如下: HTML5雨滴特效 img { display: none; } body { overflow: hidden; } #canvas { pos ...
HTML5雨滴特效，晶莹剔透
<html> <head> <title>HTML5雨滴特效</title> <style media="screen" ty ...
雨滴特效源码html,js雨滴特效
html> canvas雨滴特效 body{ margin:0; } canvas{ display: block; background-color:#090909; } var oCanva ...
html页面特效是怎么做的,HTML5实现晶莹剔透的雨滴特效
HTML5雨滴特效 img { display: none; } body { overflow: hidden; } #canvas { position: absolute; top: 0px; ...
前端入门（雨滴特效，css）
(看着别人的做的,yysy视频讲的真的好详细,像我这种小白都能听懂了雨滴特效) 大概思路就是,把每个雨滴看作是一个宽为 5px , 长为 30px 的 div,然后用 js 创建窗口大小 / 5 个数 ...
HTML5 canvas生成图片马赛克特效插件
HTML5 canvas生成图片马赛克特效插件简要教程这是一款使用html5 canvas来将图片制作成马赛克效果的js插件.该插件的灵感来自于美国肖像画家Chuck Close.已经有人使用这个 ...

canvas的雨滴特效

canvas的雨滴特效

canvas的雨滴特效相关推荐

最新文章

热门文章