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

代码语言：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);
            this.angle = desiredAngle;
            this.draw();
          };
        
          this.draw = function () {
            c.save();
            c.translate(this.x, this.y);
            c.rotate(this.angle);
            c.beginPath();
            c.fillStyle = this.color;
            c.shadowColor = this.color;
            c.shadowBlur = 3;
            c.shadowOffsetX = 0;
            c.shadowOffsetY = 0;
            c.fillRect(0, -this.height / 2, this.width, height);
            c.closePath();
            c.restore();
          };
        }
        
        function Cannonball(x, y, dx, dy, radius, color, cannon, particleColors) {
          this.x = x;
          this.y = y;
          this.dx = dx;
          this.dy = -dy;
          this.radius = radius;
          this.color = color;
          this.particleColors = particleColors;
          this.source = cannon;
          this.timeToLive = canvas.height / (canvas.height + 800);
        
          this.init = function () {
            // Initialize the cannonballs start coordinates (from muzzle of cannon)
            this.x = Math.cos(this.source.angle) * this.source.width;
            this.y = Math.sin(this.source.angle) * this.source.width;
        
            // Translate relative to canvas positioning
            this.x = this.x + canvas.width / 2;
            this.y = this.y + canvas.height;
        
            // Determine whether the cannonball should be 
            // fired to the left or right of the cannon
            if (mouse.x - canvas.width / 2 < 0) {
              this.dx = -this.dx;
            }
        
            this.dy = Math.sin(this.source.angle) * 8;
            this.dx = Math.cos(this.source.angle) * 8;
          };
        
          this.update = function () {
            if (this.y + this.radius + this.dy > canvas.height) {
              this.dy = -this.dy;
            } else {
              this.dy += gravity;
            }
        
            this.x += this.dx;
            this.y += this.dy;
            this.draw();
        
            this.timeToLive -= 0.01;
          };
        
 .........完整代码请登录后点击上方下载按钮下载查看