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


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 HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
Jun 02 Javascript
学习ExtJS Window常用方法
Oct 07 Javascript
JS简单的图片放大缩小的两种方法
Nov 11 Javascript
ExtJS[Desktop]实现图标换行示例代码
Nov 17 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
Aug 20 Javascript
基于js对象,操作属性、方法详解
Aug 11 Javascript
js实现右键菜单功能
Nov 28 Javascript
文件上传插件SWFUpload的使用指南
Nov 29 Javascript
如何理解Vue的render函数的具体用法
Aug 30 Javascript
Node.js原生api搭建web服务器的方法步骤
Feb 15 Javascript
JS 数组基本用法入门示例解析
Jan 16 Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 14 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
PL-880隐藏功能
2021/03/01 无线电
php分页示例代码
2007/03/19 PHP
php 记录进行累加并显示总时长为秒的结果
2011/11/04 PHP
Phpstorm+Xdebug断点调试PHP的方法
2018/05/14 PHP
PHP预定义接口――Iterator用法示例
2020/06/05 PHP
js加解密 脚本解密
2008/02/22 Javascript
jquery为页面增加快捷键示例
2014/01/31 Javascript
Jquery实现仿京东商城省市联动菜单
2015/11/19 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
2016/12/30 Javascript
简单实现AngularJS轮播图效果
2020/04/10 Javascript
js判断文件类型大小并给出提示的实现方法
2018/01/03 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
2018/03/06 Javascript
mpvue构建小程序的方法(步骤+地址)
2018/05/22 Javascript
Vue中图片Src使用变量的方法
2019/10/30 Javascript
JavaScript之Blob对象类型的具体使用方法
2019/11/29 Javascript
浅谈webpack和webpack-cli模块源码分析
2020/01/19 Javascript
详解vue修改elementUI的分页组件视图没更新问题
2020/11/13 Javascript
Vue 简单实现前端权限控制的示例
2020/12/25 Vue.js
Python实现端口复用实例代码
2014/07/03 Python
Python批量提取PDF文件中文本的脚本
2018/03/14 Python
python 一个figure上显示多个图像的实例
2019/07/08 Python
Django中ajax发送post请求 报403错误CSRF验证失败解决方案
2019/08/13 Python
解决安装pyqt5之后无法打开spyder的问题
2019/12/13 Python
opencv 实现特定颜色线条提取与定位操作
2020/06/02 Python
python输出结果刷新及进度条的实现操作
2020/07/13 Python
HTML table 表格边框的实现思路
2019/10/12 HTML / CSS
VICHY薇姿英国官网:全球专业敏感肌护肤领先品牌
2017/07/04 全球购物
具有防紫外线功能的高性能钓鱼服装:Hook&Tackle
2018/08/16 全球购物
世界上最大的在线汽车租赁预订平台:Rentalcars.com(支持中文)
2018/10/12 全球购物
大学感恩节活动策划方案
2014/10/11 职场文书
教师党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
篮球比赛通讯稿
2015/07/18 职场文书
建立共青团委员会的请示
2019/04/02 职场文书
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS
简单谈谈Python面向对象的相关知识
2021/06/28 Python
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS