canvas飓风旋转鼠标跟随尾巴动画效果代码
代码语言:html
所属分类:动画
代码描述:canvas飓风旋转鼠标跟随尾巴动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <body> <canvas id="world"><p class="noCanvas">You need a <a href="https://www.google.com/chrome">modern browser</a> to view this.</p></canvas> <script> /** * With love. * http://hakim.se/experiments/ * http://twitter.com/hakimel */ var SCREEN_WIDTH = 900; var SCREEN_HEIGHT = 600; var RADIUS = 110; var RADIUS_SCALE = 1; var RADIUS_SCALE_MIN = 1; var RADIUS_SCALE_MAX = 1.5; // The number of particles that are used to generate the trail var QUANTITY = 25; var canvas; var context; var particles; var mouseX = (window.innerWidth - SCREEN_WIDTH); var mouseY = (window.innerHeight - SCREEN_HEIGHT); var mouseIsDown = false; init(); function init() { canvas = document.getElementById( 'world' ); if (canvas && canvas.getContext) { context = canvas.getContext('2d'); // Register event listeners document.addEventListener('mousemove', documentMouseMoveHandler, false); document.addEventListener('mousedown', documentMouseDownHandler, false); document.addEventListener('mouseup', documentMouseUpHandler, false); canvas.addEventListener('touchstart', canvasTouchStartHandler, false); canvas.addEventListener('touchmove', canvasTouchMoveHandler, false); window.addEventListener('resize', windowResizeHandler, false); createParticles(); windowResizeHandler(); setInterval( loop, 1000 / 60 ); } } function createParticles() { particles = []; for (var i = 0; i < QUANTITY; i++) { var particle = { position: { x: mouseX, y: mouse.........完整代码请登录后点击上方下载按钮下载查看
网友评论0