小程序利用canvas实现波浪动态图，原生canvas的部分限制

小程序的canvas与该动态图的问题

小程序的canvas与html的canvas实现是完全一致的，但是会有一些坑，比如在component使用时会有一些限制，需要绑定this，匹配上下文环境获取canvas，另外看到一种方式，请参考 http://blog.majinyu.xyz/index.php/weapp/canvas-not-work-in-customized-components-in-weapp/，
其次说到该动态图，网上的小程序demo是没有的，因此才写上

首先上效果图片

效果如图所示，会显示一个动态的水波浪，好看的动画背景，适用于很多场景

图片:

下面直接上代码

html代码片

  <!-- html -->
    <canvas   canvas-id="canvas" class="canvas"></canvas>
  

css代码片

// css
    .canvas {
  width: 305px;
  height: 305px;
  background-color: #fff;
}

js代码片

// javascript
Page({
  onReady: function () {
    this.drawBall()
  },
  drawBall: function () {
    var canvas={
        width:300,
        height:300,
    };
      var boHeight = canvas.height / 10;
      var posHeight = canvas.height / 1.2;
      //初始角度为0 
      var step = 0;
      //定义三条不同波浪的颜色 
      var lines = ["rgba(0,222,255, 0.2)",
          "rgba(157,192,249, 0.2)",
          "rgba(0,168,255, 0.2)"]; 
    var context = wx.createContext();
    debugger
      let requestAnimFrame = (function () {
          return function (callback) {
                  setTimeout(callback, 1000 / 60);
              };
      })();
      function loop() {
          context.clearRect(0, 0, canvas.width, canvas.height);
          step++;
          //画3个不同颜色的矩形 
          for (var j = lines.length - 1; j >= 0; j--) {
              context.fillStyle = lines[j];
              //每个矩形的角度都不同，每个之间相差45度 
              var angle = (step + j * 50) * Math.PI / 180;
              var deltaHeight = Math.sin(angle) * boHeight;
              var deltaHeightRight = Math.cos(angle) * boHeight;
              context.beginPath();
              context.moveTo(0, posHeight + deltaHeight);
              context.bezierCurveTo(canvas.width / 2, posHeight + deltaHeight - boHeight, canvas.width / 2, posHeight + deltaHeightRight - boHeight, canvas.width, posHeight + deltaHeightRight);
              context.lineTo(canvas.width, canvas.height);
              context.lineTo(0, canvas.height);
              context.lineTo(0, posHeight + deltaHeight);
              context.closePath();
              context.fill();
          }
          wx.drawCanvas({
              canvasId: 'canvas',
              actions: context.getActions()
          })
          
          requestAnimFrame(loop);
      }
      loop(); 
  },
})

该文章4个月后注：最近几天公司又叫我写了一个局部加载的动画，感觉自己已经能独立的完全编写任何2D简单动画了（总不能画画把）

懒得写的朋友可以找我要代码 qq251396223