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

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

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

二次贝塞尔曲线

在微信官方的二次贝塞尔曲线画法连接

画波浪

思路：

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

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

界面代码为(index.wxml):

view class=' page-body ' view class=' page-body-wrapper ' canvas-id=' my canvas 3 ' class=' canvas 3 '/canvas/view/viewJS代码为(index.js):

page({ onready : function(){ this。位置={ x : 150，y: 150，vx: 2，vy: 2 }，这个。obj={ offset : 0 0，baseLine: 40，direction: 1，waveDirection: 1 }，//var offset=5 this。drawquadraticcerve 3()。interval=setInterval(这。drawquadraticcerve 3，1画大波浪*/drawQuadraticcerve 3:函数(){ var obj=this.obj var startX=20，itemWidth=100，offset=obj.offset，baseLine=obj.baseLine，waveHeight=10，direction=obj.direction，wave direction=obj。波方向常数CTX=wx。createcanvascontext(' mycanvas 3 ')函数getWaveHeigh(i) { if (i % 2==0) { //返回基线波高}返回基线-波高} CTX。begin path()CTX。move to(-项目宽度* 6，基线)CTX。setfillstyle(' 4 bf6ee ')为(var I=-6；i5；I){ startX=I * item width；var currentX=startX (itemWidth/2)偏移量var currentY=getWaveHeigh(I)var current dx=startX项目宽度偏移量CTX。quadraticcerveto(current dx-10，currentY，current dx，baseLine) ctx.stroke() } //填充海水ctx。setfillstyle(' 4BF6EE ')CTX。填充()CTX。画出如果。波方向==1){ obj。偏移量=obj。offset 1 } else if(obj。波方向==-1){ obj。偏移量=obj。offset-1 } if(obj。offset==400){ obj。offset=0 } if(obj。offset==50 | | obj。offset==1){//obj。波的方向=obj。波方向*-1 }//if(方向=)以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。