canvas实现多彩粒子流动落下动画效果代码
代码语言:html
所属分类:粒子
代码描述:canvas实现多彩粒子流动落下动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html lang="en"> <head> <meta charset="UTF-8"> <style> * { font-family: "arial black", Helvetica, verdana, monospace, sans-serif; letter-spacing: 0.2rem; margin: 0; padding: 0; color: #fff; overflow: hidden; } body { position: relative; } canvas#canvas { display: block; background: #000; } #filter { position: absolute; top: 50%; left: 0; width: 100%; height: 50%; background: rgba(0, 0, 0, 0.6); } </style> </head> <body> <!-- partial:index.partial.html --> <canvas id="canvas" width="407" height="754">Canvas not supported.</canvas> <div id="filter"></div> <!-- partial --> <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 ********************/ var ctx = canvas.getContext('2d'); var X = canvas.width = window.innerWidth; var Y = canvas.height = window.innerHeight; var mouseX = X; var mouseY = Y; var shapeNum = 1000; var shapes = []; var startColor = rand(0, 360); var style = { black: 'black', white: 'white', lineWidth: 4, }; if (X < 768) { shapeNum = 500; } /******************** Animation ********************/ window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function(cb) { setTimeout(cb, 17); }; /******************** Shape ********************/ function Shape(ctx, x, y, c) { this.ctx = ctx; this.init(x, y, c); } Shape.prototype.init = function(x, y, c) { this.x = x; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0