HTML5Canvas实现的模拟病毒传播扩散动画特效源码.zip资源-CSDN文库

共4个文件

js：3个

html：1个

版权申诉

25 浏览量 2021-11-20 11:18:09 上传评论收藏 41KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

HTML5 Canvas实现的模拟病毒传播扩散动画特效源码.zip （4个子文件）

132686863299710927

index.html 3KB

modernizr.js 14KB

prefixfree.min.js 12KB

jquery-2.1.1.min.js 82KB

<!DOCTYPE html> <html class=" -webkit- js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths"> <head> <meta charset="UTF-8"> <meta name="viewport" content=" initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <title>HTML5 Canvas模拟的病毒传播扩散动画特效</title> <meta name="description" content="HTML5 Canvas模拟的病毒传播扩散动画特效"> <meta name="keywords" content="HTML5 Canvas模拟的病毒传播扩散动画特效"> <style> * { margin: 0px; box-sizing: border-box; } body { background-color: #111; } </style> </head> <body> <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script> <canvas width="1440" height="655"><script src="js/prefixfree.min.js"></script> <script src="js/modernizr.js"></script> <script> var canvas, ctx, walkers = []; var colors = [ "rgba(255, 0, 126, .1)", "rgba(86, 180, 255, .1)", "rgba(255, 165, 20, .1)" ]; var Walker = function(x, y, color) { this.x = x; this.y = y; this.color = color; } Walker.prototype.update = function(x, y) { this.x = x; this.y = y; } function rand(max) { return Math.floor((max) * Math.random()); } function setup() { var x = Math.floor(window.innerWidth / 2); var y = Math.floor(window.innerHeight / 2); canvas = document.querySelector('canvas'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; ctx = canvas.getContext('2d'); ctx.lineWidth = 3; for (var i = 0; i < 500; i++) { walkers.push(new Walker(x, y, colors[rand(3)])); } } function drawEach(walker) { var x = walker.x, y = walker.y; switch (rand(4)) { case 0: if (walker.x < canvas.width) x += 5; break; case 1: if (walker.x > 0) x -= 5; break; case 2: if (walker.y < canvas.height) y += 5; break; case 3: if (walker.y > 0) y -= 5; break; } ctx.strokeStyle = walker.color; ctx.beginPath(); ctx.moveTo(walker.x, walker.y); ctx.lineTo(x, y); ctx.stroke(); walker.update(x, y); } function draw() { walkers.forEach(drawEach); requestAnimationFrame(draw); } window.onload = function() { setup(); requestAnimationFrame(draw); } </script> </canvas> </body> </html>

评论收藏

内容反馈

版权申诉