js实现鼠标点击星际穿越时空穿梭动画效果代码

代码语言:html

所属分类:动画

代码描述:js实现鼠标点击星际穿越时空穿梭动画效果代码

代码标签: js 鼠标 点击 星际 穿越 时空 穿梭 动画

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
 
<meta charset="UTF-8">
 

 
<style>
body
{ background-color: hsl(256, 100%, 5%); font: 30px sans-serif; }
canvas
{ position: absolute; }
</style>


</head>

<body>
 
<canvas id='c'></canvas>

 
     
<script >
var PARTICLE_NUM = 500;
var PARTICLE_BASE_RADIUS = 0.5;
var FL = 500;
var DEFAULT_SPEED = 2;
var BOOST_SPEED = 300;

var canvas;
var canvasWidth, canvasHeight;
var context;
var centerX, centerY;
var mouseX, mouseY;
var speed = DEFAULT_SPEED;
var targetSpeed = DEFAULT_SPEED;
var particles = [];

window.addEventListener('load', function () {
  canvas = document.getElementById('c');

  var resize = function () {
    canvasWidth = canvas.width = window.innerWidth;
    canvasHeight = canvas.height = window.innerHeight;
    centerX = canvasWidth * 0.5;
    centerY = canvasHeight * 0.5;
    context = canvas.getContext('2d');
    context.fillStyle = 'rgb(255, 255, 255)';
  };

  document.addEventListener('resiz.........完整代码请登录后点击上方下载按钮下载查看

网友评论0