zoukankan      html  css  js  c++  java
  • canvas实现酷炫气泡效果

    canvas实现动画主要是靠设置定时器(setinterval())和定时清除画布里的元素实现,canvas动画上手很简单,今天可以自己动手来实现一个酷炫气泡效果。

    1. 气泡炸裂效果(类似水面波纹)

    代码如下:

    <!DOCTYPE html>
    <html lang="zh">
    <head>
      <meta charset="UTF-8">
      <title>canvas实现气泡效果</title>
      <style>
        *{
          margin: 0;
          padding: 0;
        }
        html,body{
          height: 100%;
          overflow: hidden;
          background: gray;
        }
        canvas{
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          background: white;
        }
      </style>
      <script>
        window.onload=function(){
          var oc=document.querySelector("canvas");
          if(oc.getContext){
            var ctx=oc.getContext("2d");
            // 定义一个数组,用来保存canvas中各个圆的信息;
            var arr=[];
            //随机取出数组中的圆,绘制在canvas中;
            setInterval(function(){
              for(var i=0;i<arr.length;i++){
                arr[i].r++;
                arr[i].apl-=0.01;
                if(arr[i].apl<=0){
                  arr.splice(i,1);
                }
              }
              ctx.clearRect(0,0,oc.width,oc.height);
              for(var i=0;i<arr.length;i++){
                ctx.save();
                ctx.fillStyle="rgba("+arr[i].red+","+arr[i].green+","+arr[i].blue+","+arr[i].apl+")";
                ctx.beginPath();
                ctx.arc(arr[i].x,arr[i].y,arr[i].r,0,2*Math.PI);
                ctx.fill();
                ctx.restore();
              }
            },1000/60);
            // 向数组中随机注入圆的信息;
            setInterval(function(){
              var red=Math.round(Math.random()*255);
              var green=Math.round(Math.random()*255);
              var blue=Math.round(Math.random()*255);
              var apl=1;
              var x=Math.random()*oc.width;
              var y=Math.random()*oc.height;
              var r=10;
              arr.push(
                {
                  red:red,
                  green:green,
                  blue:blue,
                  apl:apl,
                  x:x,
                  y:y,
                  r:r
                }
              );
            },50);
          }
        }
      </script>
    </head>
    <body>
      <canvas width="400" height="400"></canvas>
    </body>
    </html>
    
    1. 气泡上升效果

    代码如下:

    <!DOCTYPE html>
    <html lang="zh">
    <head>
      <meta charset="UTF-8">
      <title>canvas实现气泡效果</title>
      <style>
        *{
          margin: 0;
          padding: 0;
        }
        html,body{
          height: 100%;
          overflow: hidden;
          background: gray;
        }
        canvas{
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          background: white;
        }
      </style>
      <script>
        window.onload=function(){
          var oc=document.querySelector("canvas");
          if(oc.getContext){
            var ctx=oc.getContext("2d");
            // 定义一个数组,用来保存canvas中各个圆的信息;
            var arr=[];
            //随机取出数组中的圆,绘制在canvas中;
            setInterval(function(){
              for(var i=0;i<arr.length;i++){
                arr[i].r++;
                arr[i].apl-=0.01;
                if(arr[i].apl<=0){
                  arr.splice(i,1);
                }
              }
              ctx.clearRect(0,0,oc.width,oc.height);
              for(var i=0;i<arr.length;i++){
                ctx.save();
                ctx.fillStyle="rgba("+arr[i].red+","+arr[i].green+","+arr[i].blue+","+arr[i].apl+")";
                ctx.beginPath();
                ctx.arc(arr[i].x,arr[i].y,arr[i].r,0,2*Math.PI);
                ctx.fill();
                ctx.restore();
              }
            },1000/60);
            // 向数组中随机注入圆的信息;
            setInterval(function(){
              var red=Math.round(Math.random()*255);
              var green=Math.round(Math.random()*255);
              var blue=Math.round(Math.random()*255);
              var apl=1;
              var x=Math.random()*oc.width;
              var y=Math.random()*oc.height;
              var r=10;
              arr.push(
                {
                  red:red,
                  green:green,
                  blue:blue,
                  apl:apl,
                  x:x,
                  y:y,
                  r:r
                }
              );
            },50);
          }
        }
      </script>
    </head>
    <body>
        <canvas width="400" height="400"></canvas>
    </body>
    </html>
    
  • 相关阅读:
    Codeforces 791B. Bear and Friendship Condition 联通快 完全图
    SHU oj 422 风力观测 线段树
    hdu 5833 Zhu and 772002 高斯消元
    Codeforces Round #424 (Div. 2, rated, based on VK Cup Finals) E. Cards Sorting 树状数组
    Codeforces Round #424 (Div. 2, rated, based on VK Cup Finals) D. Office Keys time limit per test2 seconds 二分
    Codeforces Round #423 (Div. 2, rated, based on VK Cup Finals) E. DNA Evolution 树状数组
    Educational Codeforces Round 25 E. Minimal Labels 拓扑排序+逆向建图
    hdu 3864 D_num Pollard_rho算法和Miller_Rabin算法
    hdu 3861 The King’s Problem trajan缩点+二分图匹配
    Codeforces Round #420 (Div. 2) E. Okabe and El Psy Kongroo 矩阵快速幂优化dp
  • 原文地址:https://www.cnblogs.com/dreamcc/p/10840195.html
Copyright © 2011-2022 走看看