js实现乌云暴雨canvas动画效果
代码语言:html
所属分类:粒子
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /******************** Common ********************/ html, body { height: 100%; width: 100%; font-family: Helvetica, verdana, monospace; color: #FFFFFF; font-size: 100%; background: #000000; padding: 0; margin: 0; letter-spacing: 0.2rem; overflow: hidden; } a { color: #FFF; text-decoration: none; } h1 { font-size: 1.6rem; } p { padding: 0.8rem 0; font-size: 0.8rem; } div#main { position: absolute; top: 0; left: 0; padding: 1.6rem; } p#loading { position: absolute; bottom: 0; right: 0; padding: 1.6rem; } /******************** Contents ********************/ canvas#canvas { background: #000000; /* fallback for old browsers */ background: -webkit-linear-gradient(to bottom, #434343, #000000); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to bottom, #434343, #000000); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } div.controller { position: absolute; bottom: 0; left: 0; padding: 1.6rem } </style> <script> window.console = window.console || function(t) {}; </script> <script> if (document.location.search.match(/type=embed/gi)) { window.parent.postMessage("resize", "*"); } </script> </head> <body translate="no"> <div id="contents"> <canvas id="canvas">This browser cannot use a canvas.</canvas> <div class="controller"> <label for="amount">Rainfall</label> <input type="range" id="amount" min="0" max="1000"> </div> </div> <script > (function () { 'use strict'; window.addEventListener('load', function () { var canvas = document.getElementById('canvas'); var amout = document.getElementById('amout'); var direction = document.getElementById('direction'); if (!canvas || !canvas.getContext) { return false; } /******************** Random Number ********************/ function rand(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); } /******************** Var ********************/ // canvas var ctx = canvas.getContext('2d'); var X = canvas.width = window.innerWidth; var Y = canvas.height = window.innerHeight; /******************** Animation ********************/ window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function (cb) { setTimeout(cb, 17); }; /******************** Cloud ********************/ // var var cloudNum = 20; var cloudInt = 0; var firstClouds = []; var firstCloudSpeed = 0.1; var secondClouds = []; var secondCloudSpeed = 0.05; var thirdClouds = []; var thirdCloudSpeed = 0.025; function Cloud(ctx, x, y, r, c, s) { this.ctx = ctx; this.init(x, y, r, c, s); } Cloud.prototype.init = function (x, y, r, c, s) { this.ctx = ctx; this.x = x; this.y = y; this.r = r; this.c = c; this.s = s; }; Cloud.prototype.draw = function () { ctx = this.ctx; ctx.beginPath(); ctx.fillStyle = this.c; ctx.arc(this.x, this.y, this.r, Math.PI * 2, false); ctx.fill(); ctx.closePath(); }; Cloud.prototype.updatePosition = function () { this.x -= this.s; }; Cloud.prototype.wrapPosition = function () { if (this.x + this.r < 0) { this.x = X + this.r; } }; Cloud.prototype.resize = function () { this.........完整代码请登录后点击上方下载按钮下载查看
网友评论0