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


Posted in Javascript onDecember 25, 2018

这两周做一个新的项目,人员比较紧张,除了需求和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)
 }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
prototype Element学习笔记(Element篇三)
Oct 26 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
Jan 27 Javascript
jquery自定义属性(类型/属性值)
May 21 Javascript
jQuery知识点整理
Jan 30 Javascript
JS操作COOKIE实现备忘记录的方法
Apr 01 Javascript
浅谈JavaScript 数据属性和访问器属性
Sep 01 Javascript
详解基于webpack2.x的vue2.x的多页面站点
Aug 21 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
Vue.js进行查询操作的实例详解
Aug 25 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
Dec 15 Javascript
微信小程序实现运动步数排行功能(可删除)
Jul 05 Javascript
关于JS解构的5种有趣用法
Sep 05 Javascript
微信小程序开发问题之wx.previewImage
Dec 25 #Javascript
微信小程序使用for循环动态渲染页面操作示例
Dec 25 #Javascript
JavaScript简单实现动态改变HTML内容的方法示例
Dec 25 #Javascript
使用gulp构建前端自动化的方法示例
Dec 25 #Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
Dec 25 #Javascript
详解vuex commit保存数据技巧
Dec 25 #Javascript
bootstrap table实现合并单元格效果
Dec 24 #Javascript
You might like
帖几个PHP的无限分类实现想法~
2007/01/02 PHP
PHP的分页功能
2007/03/21 PHP
php木马webshell扫描器代码
2012/01/25 PHP
PHP实现linux命令tail -f
2016/02/22 PHP
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
使用js实现数据格式化
2014/12/03 Javascript
jquery实现键盘左右翻页特效
2015/04/30 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
js+css实现文字散开重组动画特效代码分享
2015/08/21 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
2017/04/19 Javascript
H5图片压缩与上传实例
2017/04/21 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
2017/04/22 Javascript
Require.js的基本用法详解
2017/07/03 Javascript
Three.js利用dat.GUI如何简化试验流程详解
2017/09/26 Javascript
基于vue2实现左滑删除功能
2017/11/28 Javascript
JS实现图片旋转动画效果封装与使用示例
2018/07/09 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
2018/09/05 jQuery
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
详解基于electron制作一个node压缩图片的桌面应用
2019/01/29 Javascript
vue中axios封装使用的完整教程
2021/03/03 Vue.js
Python正则抓取网易新闻的方法示例
2017/04/21 Python
如何在sae中设置django,让sae的工作环境跟本地python环境一致
2017/11/21 Python
用python处理图片实现图像中的像素访问
2018/05/04 Python
使用Python处理Excel表格的简单方法
2018/06/07 Python
django执行数据库查询之后实现返回的结果集转json
2020/03/31 Python
商务英语本科生的自我评价分享
2013/11/15 职场文书
关于迟到的检讨书
2014/01/26 职场文书
小学兴趣小组活动总结
2014/07/07 职场文书
4s店活动策划方案
2014/08/25 职场文书
群众路线个人整改方案
2014/10/25 职场文书
2014年档案室工作总结
2014/12/01 职场文书
结婚老公保证书
2015/02/26 职场文书
通知格式
2015/04/27 职场文书
用python画城市轮播地图
2021/05/28 Python
python如何利用traceback获取详细的异常信息
2021/06/05 Python
python 详解turtle画爱心代码
2022/02/15 Python