js显示方波

本篇文章主要介绍一下如何使用js脚本绘制波形(方波)动画.

1.写出代码框架.

2.在script标签里添加脚本函数.

      //从0到0的方波段
      function wav_squre_0_0(ctx, p)
      {
          ctx.lineTo(p.x+20, p.y);
          p.x += 20;
      }

      //从0到1的方波段
      function wav_squre_0_1(ctx, p)
      {
          ctx.lineTo(p.x, p.y-20);
          ctx.lineTo(p.x+20, p.y-20);
          p.x += 20;
          p.y -= 20;
      }

      //从1到0的方波段
      function wav_squre_1_0(ctx, p)
      {
          ctx.lineTo(p.x, p.y+20);
          ctx.lineTo(p.x+20, p.y+20);
          p.x += 20;
          p.y += 20;
      }

      //从1到1的方波段
      function wav_squre_1_1(ctx, p)
      {
          ctx.lineTo(p.x+20, p.y);
          p.x += 20;
      }

3.统一四段函数.

      //组合四个函数为统一接口
      function wav_squre_m_n(ctx, p, m, n)
      {
          if(m == '0' && n == '0')
          {
              wav_squre_0_0(ctx, p);
          }
          else if(m == '0' && n == '1')
          {
              wav_squre_0_1(ctx, p);
          }
          else if(m == '1' && n == '0')
          {
              wav_squre_1_0(ctx, p);
          }
          else if(m == '1' && n == '1')
          {
              wav_squre_1_1(ctx, p);
          }
          else
          {
              if(n == '0') wav_squre_0_0(ctx, p);
              else wav_squre_0_1(ctx, p);
          }
      }

      //用0和1的字符串绘制方波
      function wav_squre_analysis(ctx, p, str)
      {
          var i = 0;

          wav_squre_m_n(ctx, p, '0', str[0]);

          for(i=1; i

4.更新绘制函数

      function wav_squre_update()
      {
          var str = gstr.substr(k,12);   //取其中12段为一个时长显示

          ctx.clearRect(0,0,600,600);

          ctx.beginPath();
          ctx.moveTo(p.x, p.y);

          //console.log(str);

          wav_squre_analysis(ctx, p, str);

          p.x = 100;
          p.y = 100;

          k += 1;

          if(k >= gstr.length) clearInterval(m);

          ctx.stroke();
      }

5.绘制函数

  function wav_squre_draw()
  {
      canvas = document.getElementById('canvas');
      ctx = canvas.getContext('2d');

      p.x = 100;
      p.y = 100;

      ctx.lineWidth = 2;
      ctx.strokeStyle = "green";

      m = setInterval(wav_squre_update, 1000/60);
  }

6.全局变量以及调用函数.

      var gstr = "10101010101010101000001111000001101010100101001010101010100101010100101010100011100000000000000000000000000000000000000000000000001111111111111111111111111111111111111111111111110000000000000000000000000000000000000000000000111111111111111111111111111111111000000000000000000000000000000011111111111111111111111111111111111111000000000000000000000000000000111111111111111111111110000000000000000000000011111111111111111111110000000000000000010"; (波字符串)
      var m;
      var k = 0; //字符串偏移
      var canvas;
      var ctx;
      var p = {};  //绘制点

      wav_squre_draw();

6.最后附上完整源码.