canvas实现五彩缤纷彩色爱心落下表白动画效果代码-html代码-BFW代码库

canvas实现五彩缤纷彩色爱心落下表白动画效果代码

代码语言：html

所属分类：表白

代码描述：canvas实现五彩缤纷彩色爱心落下表白动画效果代码

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

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

<head>
    <meta charset="UTF-8">

    <style>
        @import url(https://fonts.googleapis.com/css?family=Sonsie+One);
    body {
      width: 100%;
      margin: 0;
      overflow: hidden;
      font-family: "Sonsie One", cursive;
    }
    </style>
</head>

<body>

    <canvas id='canv'></canvas>

    <script>
        var c = document.getElementById('canv');
    var $ = c.getContext('2d');
    var w = c.width = window.innerWidth;
    var h = c.height = window.innerHeight;
    var _w = w * 0.5;
    var _h = h * 0.5;
    var num = 80;
    var hearts = [];
    var u = 0;
    for (var i = 0; i < num; i++) {
      var heart = new Heart(_w + rnd(-w, w),
        _h + rnd(-h, h), rnd(20, 145), 'heart');
      hearts.push(heart);
    }
    fallen();
    
    function fallen() {
      u -= .2;
      window.requestAnimationFrame(fallen);
      $.globalCompositeOperation = 'source-over';
      var g_ = $.createLinearGradient(c.width + c.width, c.height + c.height * 1.5, c.width + c.width, 1);
      g_.addColorStop(0, 'hsla(253, 5%, 95%, 1)');
      g_.addColorStop(0.5, 'hsla(253, 75%, 20%, 1)');
      g_.addColorStop(1, 'hsla(0, 0%, 5%, 1)');
      $.fillStyle = g_;
      $.fillRect(0, 0, c.width, c.height);
      $.globalCompositeOperation = 'difference';
      var t = "Love As Though".split("").join(String.fromCharCode(0x2004));
      var t2 = "There Is No Hate".split("").join(String.fromCharCode(0x2004));
      $.font = "3.5em Sonsie One";
      $.fillStyle = 'hsla(' + u + ',85%,50%,.2)';
      $.fillText(t, (c.width - $.measureText(t).width) * 0.5, c.height * 0.45);
      $.fillText(t2, (c.width - $.measureText(t2).width) * 0.5, c.height * 0.58);
      $.font = "1em Sonsie One";
      $.fillStyle = 'hsla(253, 85%, 20%, 1)';
      var t3 = "#AllMyLoveToBrussels".split("").join(String.fromCharCode(0x2004));
    
      $.fillText(t3, (c.width - $.measureText(t3).width) * 0.8, c.height * 0.9);
      $.font = ".85em Sonsie One".........完整代码请登录后点击上方下载按钮下载查看