canvas下雨打雷效果

废话不多说，代码走起

*html部分*
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>canvas下雨打雷效果</title><link rel="stylesheet" href="css/style.css">
</head><body onresize="_pexresize()"><canvas id="dowebok" width="1280" height="720"></canvas><script src="js/script.js"></script>
</body></html>

body {margin: 0;background: #000;
}canvas {background: url("../images/img1.jpg");background-size: cover;background-repeat: no-repeat;background-position: center center;
}

*javascript部分*
var canvas = document.getElementById('dowebok');
var ctx = canvas.getContext('2d');var stgw = 1280;
var stgh = 720;var loffset = 0;
var toffset = 0;function _pexresize() {var cw = window.innerWidth;var ch = window.innerHeight;if (cw <= ch * stgw / stgh) {loffset = 0;toffset = Math.floor(ch - (cw * stgh / stgw)) / 2;canvas.style.width = cw + "px";canvas.style.height = Math.floor(cw * stgh / stgw) + "px";} else {loffset = Math.floor(cw - (ch * stgw / stgh)) / 2;toffset = 0;canvas.style.height = ch + "px";canvas.style.width = Math.floor(ch * stgw / stgh) + "px";}canvas.style.marginLeft = loffset + "px";canvas.style.marginTop = toffset + "px";
}
_pexresize();var count = 100;
var lcount = 6;var layer = [];
var layery = [];ctx.fillStyle = "rgba(255,255,255,0.5)";
for (var l = 0; l < lcount; l++) {ctx.clearRect(0, 0, stgw, stgh);for (var i = 0; i < count * (lcount - l) / 1.5; i++) {var myx = Math.floor(Math.random() * stgw);var myy = Math.floor(Math.random() * stgh);var myh = l * 6 + 8;var myw = myh / 10;ctx.beginPath();ctx.moveTo(myx, myy);ctx.lineTo(myx + myw, myy + myh);ctx.arc(myx, myy + myh, myw, 0, 1 * Math.PI);ctx.lineTo(myx - myw, myy + myh);ctx.closePath();ctx.fill();}layer[l] = new Image();layer[l].src = canvas.toDataURL("image/png");layery[l] = 0;
}var stt = 0;
var str = Date.now() + Math.random() * 4000;
var stact = false;function animate() {ctx.clearRect(0, 0, stgw, stgh);for (var l = 0; l < lcount; l++) {layery[l] += (l + 1.5) * 5;if (layery[l] > stgh) {layery[l] = layery[l] - stgh;}ctx.drawImage(layer[l], 0, layery[l]);ctx.drawImage(layer[l], 0, layery[l] - stgh);}if (Date.now() > str) {stact = true;}if (stact) {stt++;if (stt < 5 + Math.random() * 10) {var ex = stt / 30;} else {var ex = (stt - 10) / 30;}if (stt > 20) {stt = 0;stact = false;str = Date.now() + Math.random() * 8000 + 2000;}ctx.fillStyle = "rgba(255,255,255," + ex + ")";ctx.fillRect(0, 0, stgw, stgh);}window.requestAnimationFrame(animate);
}animate();

canvas下雨打雷效果相关推荐

下雨打雷效果（动态）html
提供了下雨打雷的动态效果(内涵js文件) 底部图片可以更换: 下载地址https://pan.baidu.com/s/12FDjM5UKkmLqlhIPAuABSQ 提取码:yvvc
H5 Canvas下雨特效
模仿下雨的特效,雨点从空中随机飘落. 这个特效使用了H5的新特性Canvas. 效果演示代码展示 body代码 <!DOCTYPE html> <html lang="e ...
20多行js实现canvas雪夜下雪效果
目录前言实现canvas雪夜下雪效果 1.设置canvas标签的id为cvs,设置背景颜色为黑色 2.设置body外边距为0 3.通过获取DOM元素获得画板 4.指定二维绘图 5.设置宽高填满页面 ...
html中放大镜案列,Canvas实现放大镜效果完整案例分析(附代码)
本文主要记录 canvas 在图像.文字处理.离屏技术和放大镜特效的实现过程中使用到的api.先看下效果吧: 一张模糊的图片: 鼠标点击任意位置,产生放大效果: 哇塞~ 一个帅哥,哈哈哈哈~ 1.放大 ...
原生js实现canvas气泡冒泡效果
说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单 2, 只需引入 ...
java做橡皮擦效果_HTML5 canvas橡皮擦擦拭效果
这是一款HTML5 canvas橡皮擦擦拭效果.该效果通过canvas来制作遮罩层和擦拭用的橡皮擦,用户可以通过移动鼠标来移除遮罩层,效果非常炫酷. 因为发代码有时会排版混乱,所以先发图演示了.源码已 ...
鼠标点击特效：canvas点击效果
JS代码(代码中包含了sketch.min.js的源码,如果你的网站已经引用了,请删掉下面的6到7行.): /** 鼠标点击特效:canvas点击效果*/ /* Copyright (C) 2013 ...
canvas实现涂鸦效果--橡皮檫和历史记录
利用canvas实现涂鸦效果,包括更换笔触大小颜色.换背景图.橡皮檫.历史记录.清屏等功能,并能保存涂鸦图片到本地. 由于篇幅问题,本文主要实现橡皮檫和历史记录功能,该部分功能不操作背景图片,最终效果 ...
canvas实现聚光灯效果（js）
效果展示: 源码展示: <!doctype html> <html> <head><meta charset="utf-8">< ...

canvas下雨打雷效果

canvas下雨打雷效果

canvas下雨打雷效果相关推荐

最新文章

热门文章