微信小程序使用二次贝塞尔曲线画波浪

这两周做一个新的项目，人员比较紧张，除了需求和ui，前端后端一个人来干。

在项目需求确定后，ui隔了几天设计出了ui界面，拿到ui效果图后见有一个界面有波浪效果的我当时就蒙圈了，这都啥玩意啊？转念想到了最近在it圈挺火的那个事件：产品要求安卓程序员实现根据用户手机壳颜色自动更换app主题的需求后，顿时觉得画个波浪这个压根就不是事啊。

二次贝塞尔曲线

在微信官方的

画波浪

思路：

在屏幕左边画一个波，然后让它一直向屏幕右边平移过去。其x的值由负数变为正数依次增大；然后一直重复此操作。

我画出来的波浪如下(感觉还是有那么一点波浪的感觉)：

界面代码为(index.wxml)：

<view class="page-body">
 <view class="page-body-wrapper">
  <canvas canvas-id="mycanvas3" class="canvas3"></canvas>
 </view>
</view>

js代码为(index.js)：

page({
 onready: function() {
  this.position = {
    x: 150,
    y: 150,
    vx: 2,
    vy: 2
   },
   this.obj = {
    offset: 0,
    baseline: 40,
    direction: 1,
    wavedirection: 1
   },
   // var offset = 5
   this.drawquadraticcurve3()
  this.interval = setinterval(this.drawquadraticcurve3, 1)
  console.log(">>>>>>>>>" + this.obj.offset)
 },
 /**
  * 画大波浪
  */
 drawquadraticcurve3: function() {
  var obj = this.obj
  var startx = 20,
   itemwidth = 100,
   offset = obj.offset,
   baseline = obj.baseline,
   waveheight = 10,
   direction = obj.direction,
   wavedirection = obj.wavedirection
 
  const ctx = wx.createcanvascontext('mycanvas3')
 
 
  function getwaveheigh(i) {
   if (i % 2 == 0) {
    // return baseline + waveheight
   }
   return baseline - waveheight
  }
  ctx.beginpath()
  ctx.moveto(-itemwidth * 6, baseline)
  ctx.setfillstyle('#4bf6ee')
  for (var i = -6; i < 5; i++) {
   startx = i * itemwidth;
   var currentx = startx + (itemwidth / 2) + offset
   var currenty = getwaveheigh(i)
   var currentendx = startx + itemwidth + offset
   ctx.quadraticcurveto(currentendx - 10,
    currenty, currentendx, baseline)
   ctx.stroke()
  }
  //填充海水
  ctx.lineto(0, 2000)
  ctx.setfillstyle('#4bf6ee')
  ctx.fill()
 
  ctx.draw()
 
 
  if (obj.wavedirection == 1) {
   obj.offset = obj.offset + 1
  } else if (obj.wavedirection == -1) {
   obj.offset = obj.offset - 1
  }
  if (obj.offset == 400) {
   obj.offset = 0
  }
  if (obj.offset == 50 || obj.offset == 1) {
   // obj.wavedirection = obj.wavedirection * -1
  }
 
 
  // if (direction == 1) {
  //  obj.baseline = obj.baseline + 1
  // } else if (direction == -1) {
  //  obj.baseline = obj.baseline - 1
  // }
  if (obj.baseline >= 50 || obj.baseline <= 40) {
   console.log("<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<")
   //obj.direction = (obj.direction * -1)
  }
 },
 onunload: function() {
  clearinterval(this.interval)
 }
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。