canvas模拟蒲公英吹散种子粒子动画效果代码
代码语言:html
所属分类:粒子
代码描述:canvas模拟蒲公英吹散种子粒子动画效果代码
代码标签: canvas 模拟 蒲公英 吹散 种子 粒子 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background: #64b5f6; overflow: hidden; } .seed-wrapper { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; } #s { bottom: 0; height: 100%; left: 0; position: absolute; right: 0; top: 0; width: 100%; } .center { display: block; margin: 0 auto; text-align: center; width: 100%; } .dandelion { background: #305b14; border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; height: 100%; margin: 0 auto; width: 5px; position: absolute; top: 50%; left: 50%; transform: translateX(-50%); } #r { filter: contrast(75%) brightness(200%); } .seed { background: #fdfda0; border-radius: 100%; display: block; filter: blur(10px) brightness(150%); height: 300px; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 300px; z-index: 1; } </style> </head> <body> <div class="center"> <div class="seed-wrapper"> <canvas class="seed" id="c"></canvas> <canvas id="r"></canvas> </div> <div class="dandelion"></div> </div> <script> var blow, r_canvas, r_ctx, r_height, b, b_seed = { maxSeedCount: 500, seedCount: 0, seedFreq: 1, seeds: [] }, r_seed = { maxSeedCount: 500, seedCount: 0, seedFreq: 5, seeds: [] }, r_makeSeed = false, r_width, r_originx, r_originy, s_canvas, s_ctx, s_maxSeedCount = 5, s_seedCount = 0, s_seeds = [], s_height, s_width, i, j = 0, seed, SeedType = { BLOW: 0, RANDOM: 1, STATIC: 2 }, seed_h, seed_w, pi = Math.PI, twoPi = pi * 2, halfPi = pi / 2, mouseMove = false, b_velocity = 1; function clear(ctx, width, height) { ctx.clearRect(0, 0, width, height); } function rand(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min)) + min; } function randInt(min, max) { return Math.random() * (max - min) + min; } function negRand(min, max) { return Math.floor(Math.random() * max - min); } function spawnSeed(type, seed) { if (seed.seedCount < seed.maxSeedCount) { seed.seeds.push(new Seed(type)); seed.seedCount++; } else { r_makeSeed = false; } } function main() { r_width = 1800; r_height = 1800; r_canvas = document.getElementById("r"); r_ctx = r_canvas.getContext("2d"); r_canvas.width = r_width; r_canvas.height = r_height; r_originx = r_width / 2; r_originy = r_height / 2; /*s_width = 300; s_height = 300; s_canvas = document.getElementById( 'c' ); s_ctx = s_canvas.getContext( '2d' ); s_canvas.width = s_width ; s_canvas.height = s_height ;*/ document.querySelector("#r").addEventListener("mousemove", function (e) { mouseMove = true; var cRect = document.querySelector("#r").getBoundingClientRect(); r_originx = e.clientX - cRect.left; r_originy = e.clientY - cRect.top; }); document.querySelector("#r").addEventListener("mousedown", function (e) { b_velocity = 0.1; }); document.querySelector("#r").addEventListener("mouseup", function (e) { b_velocity = 1; }); loop(); } var Seed = function (type) { this.const(type); }; Seed.prototyp.........完整代码请登录后点击上方下载按钮下载查看
网友评论0