jquery实现太阳跟随鼠标光芒四射交互效果代码-html代码-BFW代码库

jquery实现太阳跟随鼠标光芒四射交互效果代码

代码语言：html

所属分类：动画

代码描述：jquery实现太阳跟随鼠标光芒四射交互效果代码

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

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

<head>
    <meta charset="UTF-8">
<style>
    * {
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box
}

body {
    font-size: 75%;
    background: #222;
    font-family: arial;
    padding: 20px 0 0 20px
}

canvas {
    border: 1px solid #181818;
    display: block;
    box-shadow: 0 0 10px #111;
    background: rgba(20,20,20,1)
}

</style>
</head>

<body>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script >
        
        var canvas, c, w, h,
    twoPI = Math.PI * 2,
    mX, mY,
    resize = true,
    mousemove = true,
    per = { x: 0, y: 0 },
    mtn, trackmouse = false;

window.onload = function(){
  canvas = document.createElement('canvas')
    w = canvas.width = window.innerWidth - 40;
  h = canvas.height = window.innerHeight - 40;
  c = canvas.getContext('2d');
  document.body.appendChild(canvas);
  
  !resize || window.addEventListener('resize', function(e){ w = canvas.width = window.innerWidth - 40; h = canvas.height = window.innerHeight - 40; });
  !mousemove || canvas.addEventListener('mousemove', function(e){
    trackmouse = true;
    mX = e.pageX-20; mY = e.pageY-20;
    per = { x: mX, y: mY };
  });
  
  mX = w/2;
  mY = w/2;
  
  per = { x: w/2, y: h/2, step: 1 }
    mtn = new Moun.........完整代码请登录后点击上方下载按钮下载查看