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


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 相关文章推荐
js中几种去掉字串左右空格的方法
Dec 25 Javascript
jQuery获取cookie值及删除cookie用法实例
Apr 15 Javascript
如何在Angular.JS中接收并下载PDF
Nov 26 Javascript
解决Angular.Js与Django标签冲突的方案
Dec 20 Javascript
JavaScript原生节点操作小结
Jan 17 Javascript
利用原生JS与jQuery实现数字线性变化的动画
Feb 24 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
Oct 24 Javascript
从零开始搭建webpack+react开发环境的详细步骤
May 18 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
Aug 10 Javascript
如何测量vue应用运行时的性能
Jun 21 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
详解javascript脚本何时会被执行
Feb 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
Linux下将excel数据导入到mssql数据库中的方法
2010/02/08 PHP
PHP 第二节 数据类型之数组
2012/04/28 PHP
php控制linux服务器常用功能 关机 重启 开新站点等
2012/09/05 PHP
phpword插件导出word文件时中文乱码问题处理方案
2014/08/19 PHP
PHP环境中Memcache的安装和使用
2015/11/05 PHP
php运行报错Call to undefined function curl_init()的最新解决方法
2016/11/20 PHP
php无限极分类实现方法分析
2019/07/04 PHP
解决PHP使用CURL发送GET请求时传递参数的问题
2019/10/11 PHP
js脚本学习 比较实用的基础
2006/09/07 Javascript
JQuery 操作select标签实现代码
2010/05/14 Javascript
浅谈js中变量初始化
2015/02/03 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
2016/09/05 Javascript
老生常谈jquery id选择器和class选择器的区别
2017/02/12 Javascript
vue-router路由简单案例介绍
2017/02/21 Javascript
VUE实现日历组件功能
2017/03/13 Javascript
基于JavaScript实现的顺序查找算法示例
2017/04/14 Javascript
js实现添加删除表格(两种方法)
2017/04/27 Javascript
react开发教程之React 组件之间的通信方式
2017/08/12 Javascript
js实现上传并压缩图片效果
2018/01/10 Javascript
three.js 入门案例详解
2018/01/23 Javascript
浅析JavaScript异步代码优化
2019/03/18 Javascript
微信小程序pinker组件使用实现自动相减日期
2020/05/07 Javascript
原生JS实现拖拽功能
2020/12/16 Javascript
详解javascript脚本何时会被执行
2021/02/05 Javascript
python list转dict示例分享
2014/01/28 Python
按日期打印Python的Tornado框架中的日志的方法
2015/05/02 Python
通过Python爬虫代理IP快速增加博客阅读量
2016/12/14 Python
利用aardio给python编写图形界面
2017/08/21 Python
python 常见字符串与函数的用法详解
2018/11/23 Python
基于python实现KNN分类算法
2020/04/23 Python
详解python校验SQL脚本命名规则
2019/03/22 Python
Python 调用有道翻译接口实现翻译
2020/03/02 Python
美国购买舞会礼服网站:Couture Candy
2019/12/29 全球购物
财务人员岗位职责
2015/02/03 职场文书
2016年小学端午节活动总结
2016/04/01 职场文书
CSS3 制作精美的定价表
2021/04/06 HTML / CSS