粒子跟随鼠标聚集和散开的效果
代码语言: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: #FFF; font-size: 100%; padding: 0; margin: 0; letter-spacing: 0.2rem; overflow: hidden; background: #74ebd5; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #ACB6E5, #74ebd5); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #ACB6E5, #74ebd5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } a { color: #FFF; text-decoration: none; } h1 { font-size: 1.6rem; } h2 { padding-top: 0.8rem; } p { padding: 0.8rem 0; font-size: 0.8rem; } div#main { position: absolute; top: 0; left: 0; padding: 1.6rem; } /******************** Contents ********************/ canvas#canvas { background: #74ebd5; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #ACB6E5, #74ebd5); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #ACB6E5, #74ebd5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } </style> </head> <body translate="no"> <div id="main"> <h1>particleParty</h1> <h2>Click and move, and they will gather to the party. so click again, they will break up.</h2> <p>Created date / February 20, 2020</p> </div> <div id="contents"> <canvas id="canvas">This browser cannot use a canvas.</canvas> </div> <script > (function () { 'use strict'; window.addEventListener('load', function () { var canvas = document.getElementById('canvas'); 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; var flg = true; var mouseX = null; var mouseY = null; /******************** Particle ********************/ var particleNum = 500; var particles = []; if (X < 768) { particleNum = 250; } function Particle(ctx, x, y, r) { this.ctx = ctx; this.init(x, y, r); } Particle.prototype.init = function (x, y, r) { this.x = x; this.y = y; this.x1 = this.x; this.y1 = this.y; this.r = r; this.v = { x: rand(-10, 10) *.........完整代码请登录后点击上方下载按钮下载查看
网友评论0