canvas细雨蒙蒙下雨动画效果代码

代码语言:html

所属分类:粒子

代码描述:canvas细雨蒙蒙下雨动画效果代码

代码标签: 下雨 动画 效果

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<style>
body {
  margin: 0;
  overflow: hidden;

  background: url(//repo.bfw.wiki/bfwrepo/image/5fd8b1d9c228b.png);
  background-size: cover;
}</style>
</head>
<body>
<canvas id="canvas"></canvas>

<script>
$(document).ready(function() {
  var canvas = $('#canvas')[0];
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  
  if(canvas.getContext) {
    var ctx = canvas.getContext('2d');
    var w = canvas.width;
    var h = canvas.height;
    ctx.strokeStyle = 'rgba(174,194,224,0.5)';
    ctx.lineWidth = 1;
    ctx.lineCap = 'round';
    
    
    var init = [];
    var maxParts = 200;  
    for(var a = 0; a < maxParts; a++) {
      i.........完整代码请登录后点击上方下载按钮下载查看

网友评论0