×

canvas跟着鼠标走的小球

作者:ceshi2018.07.06来源:Web前端之家浏览:1848评论:0
关键词:canvas

canvas跟着鼠标走的小球,来玩下吧#@

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>canvas 版炫彩小球</title>
  <!-- 
   -->
  <style>
    #canvas {
      border: 1px solid #000;
      /*background-color: #000;*/
    }
  </style>
</head>

<body>
  <canvas id="canvas" width="800" height="600"></canvas>
  <script>
    var canvas = document.getElementById('canvas')
    var ctx = canvas.getContext('2d')

    var ballList = []

    function Ball(x, y) {
      this.x = x
      this.y = y
      // 20 - 50
      this.r = Math.random() * 30 + 20
      this.color = 'rgb(' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ')'
      this.directionX = Math.random() * 10 - 5
      this.directionY = Math.random() * 10 - 5
    }

    Ball.prototype.update = function () {
      this.x += this.directionX
      this.y += this.directionY
      // 31 2
      this.r -= 2
      // console.log(this.r)
      // if (this.r <= 0) {
      //   // 如果衰减的半径小球等于 0 了,则把这个小球从数组中删除
      //   var index = ballList.findIndex(function (item) {
      //     return item === this
      //   }.bind(this))
      //   console.log(index)
      //   ballList.splice(index, 1)
      // }
    }

    Ball.prototype.render = function () {
      ctx.beginPath()
      ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI)
      ctx.fillStyle = this.color
      ctx.fill()
    }

    // 鼠标在画布上移动的时候,不断地产生小球
    canvas.onmousemove = function (e) {
      // 获取鼠标移动的坐标就是圆心的坐标
      ballList.push(new Ball(e.clientX, e.clientY))
    }

    // 动画主循环定时器
    //    1. 清除整个画布
    //    2. 更新每个小球的状态
    //       x y r 运动衰减
    //       当半径衰减的 小于等于 0 的时候,把小球从数组中删除
    //    3. 把更新过后的小球重新绘制到画布中
    window.setInterval(function () {
      // 注意:动画原理:一定要在重新绘制直线先清除整个画布
      ctx.clearRect(0, 0, canvas.width, canvas.height)
      // ballList.forEach(function (item) {
      //   // 小球先 update 自己
      //   // update 的过程可能会把自己删除,一旦删除数组索引就错乱了
      //   // 当数组索引错乱之后,你再继续遍历就可能会把误删
      //   item.update() // 小球自己更新自己

      //   if (item) {
      //     item.render() // 小球自己渲染自己
      //   }
      // })

      // 如果在遍历数组的过程中删除元素,不要使用 forEach 循环
      // 因为如果你在遍历的过程中删除了数组元素,会导致索引错乱
      // 所以解决方法就是使用 for 循环,在循环中当满足删除条件的时候,把该元素从数组中删除,同时记得维护循环变量 i 让它倒退一次
      // 这样做的话才能保证你的删除不会影响别的,这才是最正确的删除的做法
      for (var i = 0; i < ballList.length; i++) {
        ballList[i].update()
        if (ballList[i].r <= 0) {
          ballList.splice(i, 1)
          i--
          // 结束该元素的循环处理,处理下一个元素
          continue
        }
        ballList[i].render()
      }
    }, 1000 / 50)
  </script>
</body>

</html>
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
http://www.jiangweishan.com/article/canvas1231480198.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • admin

    是的,新版也是不错的。...

  • Qanmy

    火狐56版本最经典。。。...

  • 前端大爆炸

    交换一下链接前端大爆炸!-WEBBANG!BANG!!BANG!!!https://a...

  • Wreb

    加群讨论...

  • 访客

    非常感谢...

  • 访客

    那如果自定义转发的图片未生成完,他给我转发的是默认截屏怎么办...

  • 男装品牌

    文章不错支持一下...

  • 女装品牌

    文章不错非常喜欢...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2013-2018 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero