js实现鼠标点击星际穿越时空穿梭动画效果代码
代码语言:html
所属分类:动画
代码描述: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