HTML5 Canvas绘制银河系特效（鼠标点击拖动一下看效果）-html代码-BFW代码库

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 angle2 = (p1,p2) => Math.atan2(
          p2[1]-p1[1],
          p2[0]-p1[0]
        );
        var distance2 = (p1,p2) => Math.sqrt(
          Math.pow(p1[0]-p2[0], 2) + 
          Math.pow(p1[1]-p2[1], 2)
        );

        var createDustParticle = (color) => {
          
          var canvas = document.createElement('canvas');
          
          var w = 100;
          var h = 100;
          var cx = w * 0.5;
          var cy = h * 0.5;
          
          canvas.width = w;
          canvas.height = h;
          var ctx = canvas.getContext('2d');
          canvas.ctx = ctx;
          
          var xRand = -5 + (r()*10);
          var yRand = -5 + (r()*10);
          var xRand2 = 10 + (r()*(cx/2));
          var yRand2 = 10 + (r()*(cy/2));
          
          var color = color || {
                r: Math.round(150+(r()*100)),
                g: Math.round(50+(r()*100)),
                b: Math.round(50+(r()*100))
          };
          
          ctx.fillStyle = `rgba(${color.r},${color.g},${color.b},.02)`;
          
          Array
                .from(new Array(200), () => randomNumbers(3))
                .forEach( (p,i,arr) => {
                  var length = arr.length;
                  
                  var x = Math.cos( TAU/xRand/length*i ) * p[2]*xRand2 + cx;
                  var y = Math.sin( TAU/yRand/length*i ) * p[2]*yRand2 + cy;
                  
                  ctx.beginPath();
                  ctx.moveTo(x, y);
                  ctx.arc(x, y, p[2]*4, 0, TAU);
                  ctx.fill();
                
                });
          
                return.........完整代码请登录后点击上方下载按钮下载查看