zoukankan      html  css  js  c++  java
  • canvas点阵函数波动,类似飘带或水波

    canvas动画利用函数波动特点制作水波动画

    <canvas id="myCanvas" width="500" height="400" style="border:0px double #996633;"></canvas>


    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    var i=0;
    setInterval(move,30);
    function move(){

      ctx.clearRect(0,0,canvas.width,canvas.height);

      var dig=Math.PI/24;
      var colorArr = ['red','yellow','green','blue','purple']
      var colorIndex = 0
      for (k=0;k<=14;k++){

        for (n=0;n<=17;n++){
          colorIndex++
          if (colorIndex >= 5) {
            colorIndex = 0
          }
          ctx.fillStyle = colorArr[colorIndex]
          x0=30*n;
          y0=30*k;
          var x=24*Math.sin((i+k*2+n*3)*dig)+x0;
          var y=24*Math.cos((i+k*2+n*3)*dig)+y0;
          ctx.beginPath();
          ctx.arc(x,y,8,0,Math.PI*2,true);
          ctx.closePath();
          ctx.fill();
        }
       }

       i=i+1;
       if (i>=48) i=0;
     }

    直接可复制代码查看效果

  • 相关阅读:
    字符统计和滑动窗口
    字典树应用及用哈希表代替
    迷宫里的动态规划应用
    求所有排列中的第 i 个排列的问题
    最大子串和问题
    二分查找、变形及应用
    前 n 个数原址排序的问题
    LeetCode 32 括号匹配
    11.常用的API
    10.正则表达式
  • 原文地址:https://www.cnblogs.com/zyz-s/p/13322537.html
Copyright © 2011-2022 走看看