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 Mountains(300,"10");
  window.setInterval(animate,17);
}
  
  function newGradient(gradient){
    var grad;
    switch(gradient.type){
      case "radial":
        grad = c.createRadialGradient(gradient.x1, gradient.y1, gradient.r1, gradient.x1, gradient.y1, gradient.r2);
        break;
      case "linear":
        grad = c.createLinearGradient(gradient.x1, gradient.y1, gradient.x2, gradient.y2);
        break;
    }
    
    for(var i = 0; i < gradient.stops.length; i++){
      grad.addColorStop(gradient.stops[i].s, gradient.stops[i].c);
    }
    
    return grad;
  }

function animate(){
  if(!trackmouse){
    per.x = mX = w/2 + Math.round(Math.cos(per.step)*w/2);
    per.y = mY = h/2 + Math.round(Math.sin(per..........完整代码请登录后点击上方下载按钮下载查看