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) - Math.sin(angle) * (pointY-originY) + originX,
		y: Math.sin(angle) * (pointX-originX) + Math.cos(angle) * (pointY-originY) + originY
	};
}

var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');

/*
  Some global variables
*/

var center = [400,250],
    pi = Math.PI,
    lob = heart_shape;
/* color, maxthicknes, minthickness, maxlength*/
var colors = [
  ["rgba(254,68,68,0.4)", 30, 20, pi/4],
  ["rgba(255,85,85,0.5)", 15, 10, pi/2],
  ["rgba(151,26,22,0.5)",  10, 8,  pi],
  ["rgba(250,240,240,0.8)", 10, 8, 1.5*pi],
  ["rgba(50,11,4,0.7)",     5, 3,  1.5*pi]
];

/*
  A loop object
*/
function InfinityLoop(){
  var pickedColor = colors[Math.round(Math.random() * (colors.length -1))];
  
  this.a = Math.random() * 50 + 150;
  //this.length = (Math.random() * 0.75 + 0.25) * pi; //Max = 2*PI
  this.length = Math.random() * pickedColor[3] + (0.25*pi);
  this.position = Math.random() * 2 * pi; //0.5 * pi;
  this.speed = (2 * pi / 100) - (Math.random() * ( pi / 200));
  this.heightAdjust = Math.random() * 0.2 + 1;
  this.center = {
    x: Math.random() * 20 - 10 + center[0],
    y: Math.random() * 20 - 10 + center[1],
  }



  this.color = pickedColor[0];//&.........完整代码请登录后点击上方下载按钮下载查看