FastBlur实现canvas流体质感表白爱心动画效果代码-html代码-BFW代码库

FastBlur实现canvas流体质感表白爱心动画效果代码

代码语言：html

所属分类：表白

代码描述：FastBlur实现canvas流体质感表白爱心动画效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        body{
      background:#ef6666; margin:0;
      padding: 0;
      overflow: hidden;
    }
    
    canvas {
      background:#ef6666;
      position: absolute;
    }
    
    div.metadata {
      position: absolute;
      bottom:0;
      width: 100%;
    
      font-family: Helvetica, Arial;
      font-size:11px;
      font-weight: bold;
      text-align: center;
      color: rgba(151,26,22,1);
    }
    div.metadata p {
      height: 20px;
    }
    a {
      color: inherit;
      text-decoration: none;
      display:inline-block;
      padding: 0 4px 3px 4px;
      border-bottom: 2px solid rgba(151,26,22,1);
      transition: all .2s;
    }
    a:hover {
      padding: 0 4px 1px 4px;
      border-bottom: 4px solid rgba(254,121,68,0.4);
    }
    
    div.title {
      position: absolute;
      top:0;
      width: 100%; 
      text-align:center;
      font-family: 'Lato', sans-serif !important;
      font-style: normal;
      font-weight: 100;
      font-size: 70px;
      padding-top:40px;
      color: rgba(254,255,240,1);
    }
    </style>
</head>

<body>
    <link href='https://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>
    <canvas id="canvas" width="800" height="500"></canvas>
    <div class="title">Happy Valentine's Day!</div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/FastBlur.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.17.js"></script>
    <script>
        /*
  Still to do:
  - Make the animation time based so it can run faster and not frame rate dependant
  - Make the thicknes bigger on random areas of the leminescate
*/

function square(x){return x*x;}
function heart_shape(t, a) {
  var x = 16 * (Math.sin(t) * Math.sin(t) * Math.sin(t));
  var y = 13 * Math.cos(t) - 5 * Math.cos(2*t) - 2 * Math.cos(3*t) - Math.cos(4*t);
  return [x*a/12, y*a/15 * -1];
}

function rotate_point(pointX, pointY, originX, originY, angle, extrude) {
  var slope = Math.atan2(pointY - originY, pointX - originX);
  pointY = originY + Math.sin(slope) * extrude;
  pointX = originX + Math.cos(slope) * extrude;
  
        angle = angle * Math.PI / 180.0;
        return {
                x: Math.cos(angle) * (pointX-originX) .........完整代码请登录后点击上方下载按钮下载查看