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


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 相关文章推荐
跨浏览器通用、可重用的选项卡tab切换js代码
Sep 20 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
Jun 24 Javascript
JS获取DropDownList的value值与text值的示例代码
Jan 07 Javascript
javascript函数声明和函数表达式区别分析
Dec 02 Javascript
jQuery搜索子元素的方法
Feb 10 Javascript
jQuery向后台传入json格式数据的方法
Feb 13 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
Aug 01 Javascript
jquery模拟进度条实现方法
Aug 03 Javascript
很实用的js选项卡切换效果
Aug 12 Javascript
Layui Table js 模拟选中checkbox的例子
Sep 03 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
Sep 04 Javascript
JS sort排序详细使用方法示例解析
Sep 27 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实现登陆验证码(类似条行码状)
2006/10/09 PHP
PHP函数microtime()用法与说明
2013/12/04 PHP
PHP SPL标准库之接口(Interface)详解
2015/05/11 PHP
php显示时间常用方法小结
2015/06/05 PHP
jquery关于图形报表的运用实现代码
2011/01/06 Javascript
jquery getScript动态加载JS方法改进详解
2012/11/15 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
js函数返回多个返回值的示例代码
2013/11/05 Javascript
setTimeout和setInterval的深入理解
2013/11/08 Javascript
用js代码改变单选框选中状态的简单实例
2013/12/18 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
angularjs学习笔记之完整的项目结构
2015/09/26 Javascript
Javascript实现Array和String互转换的方法
2015/12/21 Javascript
盘点javascript 正则表达式中 中括号的【坑】
2016/03/16 Javascript
js实现可控制左右方向的无缝滚动效果
2016/05/29 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
利用Node.js对文件进行重命名
2017/03/12 Javascript
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
vue封装swiper代码实例解析
2019/10/08 Javascript
微信小程序 scroll-view 实现锚点跳转功能
2019/12/12 Javascript
[03:02]生活中的Dendi之野外度假篇
2016/08/09 DOTA
[01:13:08]2018DOTA2亚洲邀请赛4.6 淘汰赛 mineski vs LGD 第二场
2018/04/10 DOTA
讲解Python中运算符使用时的优先级
2015/05/14 Python
Python字符串格式化
2015/06/15 Python
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
Python3实现的回文数判断及罗马数字转整数算法示例
2019/03/27 Python
python3实现弹弹球小游戏
2019/11/25 Python
python实现对变位词的判断方法
2020/04/05 Python
Nginx+Uwsgi+Django 项目部署到服务器的思路详解
2020/05/08 Python
CSS3的颜色渐变效果的示例代码
2017/09/29 HTML / CSS
HTML5所有标签汇总及标签意义解释
2015/03/12 HTML / CSS
墨尔本最受欢迎的复古风格品牌:Princess Highway
2018/12/21 全球购物
JD Sports丹麦:英国领先的运动时尚零售商
2020/11/24 全球购物
民主评议党员自我鉴定
2014/10/21 职场文书
利用html+css实现菜单栏缓慢下拉效果的示例代码
2021/03/30 HTML / CSS