canvas之动态气泡效果

利用canvas和三角函数做了一个简单的起泡效果，每个气泡的圆形都是随机生成的，且气泡线上浮动的路径为三角函数曲线，步骤如下：

1、设置一个循环定时器，随机生成每个圆形的圆心坐标、半径等数据，存储在数组arr中；

2、设置一个循环定时器，取出arr中每个圆的数据；

3、利用一个for循环，通过操作x,y等来实现动画效果，因为canvas中无法直接操作绘制的图形，所以通过不断地清空画布，再绘制不同状态的图形来实现动画效果；为了保证arr不会过大，利用判断，清除arr中不符合要求的对象

4、再利用一个for循环来将圆形绘制到画布上；

效果（是动态的，但是懒得弄动图@~~@）：

完整的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>泡沫效果</title>
  <style type="text/css">
    *{
      margin: 0;
      padding:0;
    }
    html,body {
      height: 100%;
      overflow: hidden;
    }
    canvas{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate3d(-50%,-50%,0);
      background: skyblue;
    }
  </style>
</head>
<body>
<canvas height="400" width="150">
  <span>无法显示，请换一种浏览器继续尝试，谢谢！</span>
</canvas>
</body>
<script type="text/javascript">
  window.onload = function () {
    var oc = document.querySelector("canvas")
    if(oc.getContext){
      var ctx = oc.getContext("2d")

      //在画布上随机生成圆
      var arr = []

      //将数组中的圆绘制到画布上
      setInterval(function () {
        /*console.log(arr)*/
        ctx.clearRect(0,0,oc.width,oc.height)
        for (var i = 0; i < arr.length; i++) {
          if (arr[i].y <= 50){
            arr.splice(i,1)
          }
          arr[i].deg+=5
          arr[i].x = arr[i].startX + Math.sin(arr[i].deg*Math.PI/180)*arr[i].step*2 ;
          arr[i].y = arr[i].startY - ( arr[i].deg*Math.PI/180 )*arr[i].step;

        }
        //绘制图形
        for(var i=0;i<arr.length;i++){
          /*  console.log(i)*/
          ctx.save()
          ctx.fillStyle = "rgba("+arr[i].red+","+arr[i].green+","+arr[i].blue+","+arr[i].alp+")"
          ctx.beginPath()
          ctx.arc(arr[i].x,arr[i].y,arr[i].r,0,2*Math.PI)
          ctx.fill()
          ctx.restore()
        }
      },1000/60)

      //往arr数组中存放每一个随机圆的数据
      setInterval(function () {
        var r = Math.random()*6+2
        var x = Math.random()*oc.width
        var y = oc.height - r
        var red = Math.round(Math.random()*255)
        var green = Math.round(Math.random()*255)
        var blue = Math.round(Math.random()*255)
        var alp = 1

        var deg = 0
        var startX = x
        var startY = y
        var step = Math.random()*20+10

        arr.push({
          x:x,
          y:y,
          r:r,
          red:red,
          green:green,
          blue:blue,
          alp:alp,
          deg:deg,
          startX:startX,
          startY:startY,
          step:step
        })
      },50)



    }
  }
</script>
</html>

canvas之动态气泡效果

猜你喜欢