master

分支 (1)

管理

管理

master

native-practice
/
小球动画.html

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      html,
      body {
        width: 100%;
        height: 100%;
        background-color: #fff;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script>
      var can = document.getElementById("canvas")
      can.width = window.innerWidth
      can.height = window.innerHeight
      var canvas = can.getContext("2d")
      var balls = [] //存放小球
      //创建对象
      function ball() {
        this.x = null
        this.y = null
        this.color = null
        this.r = null
        this.angle = null //小球偏移量
        this.anglex = null
        this.angley = null
        //初始状态的小球
        this.int = function(X, Y) {
          this.x = X
          this.y = Y
          this.color = this.randomcolor()
          this.r = this.randomR(10, 15)
          this.angle = Math.random() * (Math.PI * 2)
          this.anglex = this.randomR(5, 15) * Math.cos(this.angle)
          this.angley = this.randomR(5, 15) * Math.sin(this.angle)
        }
        //随机颜色
        this.randomcolor = function() {
          return "#" + parseInt(Math.random() * 16777216).toString(16)
        }
        //随机数字 可控制半径或xy移动量
        this.randomR = function(min, max) {
          return Math.random() * max + min
        }
        //小球的运动及偏移量
        this.move = function() {
          this.x += this.anglex
          this.y += this.angley
          this.r -= 0.3
          this.anglex *= 0.9
          this.angley *= 0.9
        }
      }

      //创建小球
      function createball(X, Y) {
        var count = parseInt(Math.random() * 30 + 10)
        for (var i = 0; i < count; i++) {
          var Ball = new ball()
          Ball.int(X, Y)
          balls.push(Ball)
        }
      }
      //在canvas上绘制小球
      function draw() {
        for (var i = 0; i < balls.length; i++) {
          var b = balls[i]
          b.move()
          canvas.beginPath()
          canvas.arc(b.x, b.y, b.r, 0, Math.PI * 2, true)
          canvas.fillStyle = b.color
          canvas.fill()
          canvas.closePath()
        }
      }
      //移除小球
      function remove() {
        for (var i = 0; i < balls.length; i++) {
          var b = balls[i]
          if (b.r < 0.3) {
            balls.splice(i, 1)
            i--
          }
        }
      }
      //计时器
      time()
      function time() {
        canvas.clearRect(0, 0, can.width, can.height)
        draw()
        remove()
        window.requestAnimationFrame(time)
      }
      can.onmouseup = function(e) {
        var x1 = e.pageX
        var y1 = e.pageY
        createball(x1, y1)
      }
    </script>
  </body>
</html>