js实现canvas开炮发射烟花绽放动画效果代码-html代码-BFW代码库

js实现canvas开炮发射烟花绽放动画效果代码

代码语言：html

所属分类：动画

代码描述：js实现canvas开炮发射烟花绽放动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        body {
          background: #212121;
          margin: 0;
          overflow: hidden;
        }
        
        @keyframes fadeIn {
          from {
            opacity: 0;
          }
          to {
            opacity: 1;
          }
        }
        @keyframes chill {
          from {
            opacity: 1;
          }
          to {
            opacity: 1;
          }
        }
        @keyframes fadeOut {
          from {
            opacity: 1;
          }
          to {
            opacity: 0;
          }
        }
        p {
          position: absolute;
          top: 10px;
          left: 12px;
          color: white;
          opacity: 0;
          font-family: "Source Sans Pro";
          animation: fadeIn 2s ease-out, chill 2s 2s, fadeOut 2s 4s;
        }
        
        .twitter:hover a {
          transform: rotate(-45deg) scale(1.05);
        }
        .twitter:hover i {
          color: #21c2ff;
        }
        .twitter a {
          bottom: -40px;
          right: -75px;
          transform: rotate(-45deg);
        }
        .twitter i {
          bottom: 7px;
          right: 7px;
          color: #00ACED;
        }
        
        .social-icon a {
          position: absolute;
          background: white;
          color: white;
          box-shadow: -1px -1px 20px 0px rgba(0, 0, 0, 0.3);
          display: inline-block;
          width: 150px;
          height: 80px;
          transform-origin: 50% 50%;
          transition: 0.15s ease-out;
        }
        .social-icon i {
          position: absolute;
          pointer-events: none;
          z-index: 1000;
          transition: 0.15s ease-out;
        }
        
        .youtube:hover a {
          transform: rotate(45deg) scale(1.05);
        }
        .youtube:hover i {
          color: #ec4c44;
        }
        .youtube a {
          bottom: -40px;
          left: -75px;
          transform: rotate(45deg);
        }
        .youtube i {
          bottom: 7px;
          left: 7px;
          color: #E62117;
        }
    </style>




</head>

<body>
    <canvas></canvas>

    <p>Mouse down = explosions</p>

    <script>
        var canvas = document.querySelector('canvas');
        var c = canvas.getContext('2d');
        
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        
        var mouse = {
          x: window.innerWidth / 2,
          y: window.innerHeight / 2 };
        
        
        var isMouseDown = false;
        
        window.addEventListener("mousemove", function (event) {
          mouse.x = event.clientX;
          mouse.y = event.clientY;
        });
        
        window.addEventListener("resize", function () {
          canvas.height = window.innerHeight;
          canvas.width = window.innerWidth;
        
          initializeVariables();
        });
        
        
        window.addEventListener("mousedown", function () {
          isMouseDown = true;
        });
        
        window.addEventListener("mouseup", function () {
          isMouseDown = false;
        });
        
        canvas.addEventListener("touchstart", function () {
          isMouseDown = true;
        });
        
        canvas.addEventListener("touchmove", function (event) {
          event.preventDefault();
          mouse.x = event.touches[0].pageX;
          mouse.y = event.touches[0].pageY;
        });
        
        canvas.addEventListener("touchend", function () {
          isMouseDown = false;
        });
        
        
        function Cannon(x, y, width, height, color) {
          this.x = x;
          this.y = y;
          this.width = width;
          this.height = height;
          this.angle = 0;
          this.color = color;
        
          this.update = function () {
            desiredAngle = Math.atan2(mouse.y - this.y, mouse.x - this.x);
            .........完整代码请登录后点击上方下载按钮下载查看