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


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 相关文章推荐
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
Mar 22 Javascript
收集的一些Array及String原型对象的扩展实现代码
Dec 05 Javascript
Javascript 垃圾收集机制介绍理解
May 14 Javascript
php的文件上传入门教程(实例讲解)
Apr 10 Javascript
详谈JavaScript内存泄漏
Nov 14 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
Jun 19 Javascript
Node.js模块封装及使用方法
Mar 06 Javascript
Angular Module声明和获取重载实例代码
Sep 14 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
Nov 24 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
Apr 01 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
Mar 29 Javascript
JavaScript通如何过RGraph实现动态仪表盘
Oct 15 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中经典方法实现判断多维数组是否为空
2011/10/23 PHP
PHP中去除换行解决办法小结(PHP_EOL)
2011/11/27 PHP
基于PHP生成静态页的实现方法
2013/05/10 PHP
十个PHP高级应用技巧果断收藏
2015/09/25 PHP
thinkphp3.2实现上传图片的控制器方法
2016/04/28 PHP
Yii2数据库操作常用方法小结
2017/05/04 PHP
使用Zttp简化Guzzle 调用
2017/07/02 PHP
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
2013/09/23 Javascript
jQuery多级手风琴菜单实例讲解
2015/10/22 Javascript
js图片轮播效果实现代码
2020/04/18 Javascript
javascript随机抽取0-100之间不重复的10个数
2016/02/25 Javascript
JavaScript实现购物车基本功能
2017/07/21 Javascript
解决Mac node版本升级失败的问题
2018/05/16 Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
2019/02/13 Javascript
js实现图片上传即时显示效果
2019/09/30 Javascript
微信小程序实现页面监听自定义组件的触发事件
2020/11/01 Javascript
es5 类与es6中class的区别小结
2020/11/09 Javascript
微信小程序实现页面左右滑动
2020/11/16 Javascript
[01:36:17]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第一场 1月31日
2021/03/11 DOTA
Pycharm新手教程(只需要看这篇就够了)
2019/06/18 Python
Python实现字符串中某个字母的替代功能
2019/10/21 Python
tensorflow 20:搭网络,导出模型,运行模型的实例
2020/05/26 Python
如何利用python检测图片是否包含二维码
2020/10/15 Python
使用Python实现NBA球员数据查询小程序功能
2020/11/09 Python
台湾前三大B2C购物网站:MOMO购物网
2017/04/27 全球购物
Gap工厂店:Gap Factory
2017/11/02 全球购物
Can a struct inherit from another struct? (结构体能继承结构体吗)
2016/09/25 面试题
大学生预备党员自我评价分享
2013/11/16 职场文书
运动会领导邀请函
2014/01/10 职场文书
金融行业职业生涯规划范文
2014/01/17 职场文书
优秀体育委员自荐书
2014/01/31 职场文书
超市周年庆活动方案
2014/08/16 职场文书
民警群众路线教育实践活动对照检查材料
2014/10/04 职场文书
罚站检讨书
2015/01/29 职场文书
磁贴还没死, 微软Win11可修改注册表找回Win10开始菜单
2021/11/21 数码科技
html中两种获取标签内的值的方法
2022/06/16 jQuery