js实现canvas多彩激光线条汇集形成爱心表白动画效果代码-html代码-BFW代码库

js实现canvas多彩激光线条汇集形成爱心表白动画效果代码

代码语言：html

所属分类：表白

代码描述：js实现canvas多彩激光线条汇集形成爱心表白动画效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        /* DaTouWang URL: www.datouwang.com */
     html,body{
                border: 0;
                padding: 0;
                margin: 0;
                overflow: hidden;
                background: #000;
    }
    
    .info{
      z-index:999;
      position : absolute;
      left:0;
      top:0;
      padding:10px;
      color:#fff;
      background: rgba(0,0,0,0.5);
      text-transform:capitalize;
    }
    </style>

</head>

<body>

    <canvas width="300" height="300" style="width:100%;height:100vh;" id="c"></canvas>

    <script>
        /* DaTouWang URL: www.datouwang.com */
var canvas = document.getElementById('c');
var ctx = canvas.getContext("2d");
var height = void 0,width = void 0,innerpoints = [],outerpoints = [],particles = [];

var noofpoints = 200,trashold = 10;
var x = void 0,y = void 0,p = void 0,n = void 0,point = void 0,dx = void 0,dy = void 0,color = void 0;
deltaangle = Math.PI * 2 / noofpoints,
r = Math.min(height, width) * 0.5;

var distance = function distance(x1, y1, x2, y2) {
  return Math.sqrt(Math.pow(y2 - y1, 2) + Math.pow(x2 - x1, 2));
};
var mapVal = function mapVal(num, in_min, in_max, out_min, out_max) {
  return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
};
var resize = function resize() {
  height = ctx.canvas.clientHeight;
  width = ctx.canvas.clientWidth;

  if (ctx.canvas.clientWidth !== canvas.width ||
  ctx.canvas.clientHeight !== canvas.height)
  {
    console.log("resized");
    canvas.width = width;
    canvas.height = height;
    ctx.translate(canvas.width / 2, canvas.height / 2);
    ctx.rotate(-Math.PI);
    innerpoints = [];
    r = 10;
    for (var i = deltaangle; i <= Math.PI * 2; i += deltaangle) {
      x = r * 16 * Math.pow(Math.sin(.........完整代码请登录后点击上方下载按钮下载查看