原生js实现canvas社交距离交互动画效果
代码语言:html
所属分类:动画
代码描述:原生js实现canvas社交距离交互动画效果
下面为部分代码预览,完整代码请点击下载或在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: #1995ad; font-size: 100%; padding: 0; margin: 0; letter-spacing: 0.2rem; overflow: hidden; background: #F2F2F2; } a { color: #1995ad; text-decoration: none; } h1 { font-size: 1.6rem; } h2 { padding-top: 0.8rem; } p { padding: 0.8rem 0; font-size: 0.8rem; } header#header { position: absolute; top: 0; left: 0; padding: 1.6rem; } p#loading { position: absolute; bottom: 0; right: 0; padding: 1.6rem; } /******************** Contents ********************/ canvas#canvas { background: #F2F2F2; } </style> </head> <body translate="no"> <header id="header"> <h1>socialDistance</h1> <p>Created date / April 13, 2020</p> </header> <main id="main"> <canvas id="canvas">This browser cannot use a canvas.</canvas> </main> <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 mouseX = null; var mouseY = null; /******************** Particle ********************/ var particleNum = 2; var particles = []; if (X < 768) { particleNum = 2; } 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(-2, 2) * Math.random() / 1.5, y: rand(-2, 2) * Math.random() / 1.5 }; this.c = { circle: 'rgb(161, 214, 226)', text: 'rgb(25, 149, 173)' }; this.ga = Math.random(); }; Particle.prototype.draw = function () { var ctx = this.ctx; ctx.save(); ctx.beginPath(); //ctx.globalCompositeOperation = 'xor'; ctx.globalAlpha = this.ga; ctx.fillStyle = this.c.circle; ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false); ctx.fill(); ctx.restore(); ctx.save(); ctx.fillStyle = this.c.text; ctx.font = '8px "sans-serif"'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText('r:' + this.r, this.x, this.y, this.r * 2); ctx.restore(); }; Particle.prototype.updatePosition = function () { this.x += this.v.x; this.y += this.v.y; }; Particle.prototype.drawLines = function () { ctx.save(); ctx.strokeStyle = 'rgb(161, 214, 226)'; for (var i = 0; i < particles.length; i++) { ctx.beginPath(); ctx.moveTo(this.x, this.y); ctx.lineTo(particles[i].x, particles[i].y); ctx.stroke(); } ctx.restore(); }; Particle.prototype.distance = function (i) { var j = i; ctx.save(); ctx.fillStyle = this.c.text; ctx.font = '8px "sans-serif"'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; for (var i = 0; i < particles.length; i++) { if (j !== i) { var x = Math.abs(this.x - particles[i].x); var y = Math.abs(this.y - particles[i].y); var h = x * x + y * y; var distance = Math.floor(Math.sqrt(h)); ctx.fillText(distance, this.x - (this.x - particles[i].x) / 2, this.y - (this.y - particles[i].y) / 2, this.r * 2); } } ctx.restore(); }; Particle.prototype.coll = function (i) { var j = i; for (var i = 0; i < parti.........完整代码请登录后点击上方下载按钮下载查看
网友评论0