canvas粒子下雨涟漪波纹动画效果代码

代码语言:html

所属分类:粒子

代码描述:canvas粒子下雨涟漪波纹动画效果代码

代码标签: 涟漪 波纹 动画 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>雨滴下落(canvas)</title>
	<style type="text/css">
		canvas {
			background: rgb(56, 163, 179);
			display: block;
		}

		* {
			margin: 0;
			padding: 0;
		}
	</style>
</head>

<body>
	<canvas id="canvas">您的浏览器不支持画布,请您更换浏览器!!</canvas>
	<script type="text/javascript">
		var can = document.getElementById("canvas");
		//设置2d绘图环境
		var ctx = can.getContext("2d");

		//获取浏览器窗口的宽高
		var w = can.width = window.innerWidth,
			h = can.height = window.innerHeight;
		//自适应浏览器窗口
		window.onresize = function () {
			w = can.width = window.innerWidth,
				h = can.height = window.innerHeight;
		}
		//         ctx.fillStyle="yellow"
		//       ctx.fillRect(100,100,100,100);
		//     .........完整代码请登录后点击上方下载按钮下载查看

网友评论0