canvas实现宇宙星空粒子旋转动画效果代码
代码语言:html
所属分类:粒子
代码描述:canvas实现宇宙星空粒子旋转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background: #060e1b; overflow: hidden; } </style> </head> <body> <!-- partial:index.partial.html --> <canvas id="canvas"></canvas> <!-- partial --> <script > "use strict"; var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'), w = canvas.width = window.innerWidth, h = canvas.height = window.innerHeight, hue = 217, stars = [], count = 0, maxStars = 1400; // Cache gradient var canvas2 = document.createElement('canvas'), ctx2 = canvas2.getContext('2d'); canvas2.width = 100; canvas2.height = 100; var half = canvas2.width/2, gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half); gradient2.addColorStop(0.025, '#fff'); gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)'); gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)'); gradient2.addColorStop(1, 'transparent'); ctx2.fillStyle = gradient2; ctx2.beginPath(); ctx2.arc(half, half, half, 0, Math.PI * 2); ctx2.fill(); // End cache function random(min, max) { if (arguments.length < 2) { max = min; min = 0; } if (min > max) { var hold = max; max = min; min = hold; } return Math.floor(Math.random() * .........完整代码请登录后点击上方下载按钮下载查看
网友评论0