HTML5 Canvas绘制银河系特效(鼠标点击拖动一下看效果)
代码语言:html
所属分类:粒子
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html> <head> <meta charset="utf-8"> <title>HTML5 Canvas绘制银河系特效</title> <style> body { margin:0; } canvas { position:absolute; top:0; left:0; width:100%; height:100%; } </style> </head> <body> <script type="text/javascript"> var w = window.innerWidth; var h = window.innerHeight; var dustCanvas = document.createElement('canvas'); var dustCtx = dustCanvas.getContext('2d'); var starCanvas = document.createElement('canvas'); var starCtx = starCanvas.getContext('2d'); document.body.appendChild(dustCanvas); document.body.appendChild(starCanvas); dustCanvas.width = starCanvas.width = w; dustCanvas.height = starCanvas.height = h; dustCtx.globalCompositeOperation = 'lighter'; starCtx.globalCompositeOperation = 'lighter'; var galaxies = []; var mouse = { pos: { x: w * 0.5, y: h * 0.5 }, speed: 0 }; var randomNumbers = length => Array.from(new Array(length), () => Math.random()); var PI = Math.PI; var TAU = PI * 2; var r = () => Math.random(); var an.........完整代码请登录后点击上方下载按钮下载查看
网友评论0