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


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 相关文章推荐
JMenuTab简单使用说明
Mar 13 Javascript
解析JavaScript的ES6版本中的解构赋值
Jul 28 Javascript
详解javascript数组去重问题
Nov 06 Javascript
Javascript基于AJAX回调函数传递参数实例分析
Dec 15 Javascript
JavaScript基于对象去除数组重复项的方法
Oct 09 Javascript
基于JavaScript实现右键菜单和拖拽功能
Nov 28 Javascript
jQuery Validate让普通按钮触发表单验证的方法
Dec 15 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
Mar 29 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
May 10 Javascript
Web制作验证码功能实例代码
Jun 19 Javascript
node中间层实现文件上传功能
Jun 11 Javascript
微信小程序封装的HTTP请求示例【附升级版】
May 11 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实现保存submit内容之后禁止刷新
2014/03/19 PHP
Yii数据模型中rules类验证器用法分析
2016/07/15 PHP
PHP实现将base64编码字符串转换成图片示例
2018/06/22 PHP
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
JavaScript实现GriwView单列全选(自写代码)
2013/05/13 Javascript
Jquery通过JSON字符串创建JSON对象
2014/08/24 Javascript
JavaScript实现列表分页功能特效
2015/05/15 Javascript
javascript中checkbox使用方法实例演示
2015/11/19 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
2016/04/08 Javascript
微信小程序 wxapp画布 canvas详细介绍
2016/10/31 Javascript
JavaScript基础——使用Canvas绘图
2016/11/02 Javascript
canvas实现爱心和彩虹雨效果
2017/03/09 Javascript
微信小程序动态生成二维码的实现代码
2018/07/25 Javascript
Vue开发实现吸顶效果的示例代码
2018/08/21 Javascript
Vue和React组件之间的传值方式详解
2019/01/31 Javascript
详细分析vue响应式原理
2020/06/22 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
2020/10/28 Javascript
Python基于twisted实现简单的web服务器
2014/09/29 Python
在Python中操作时间之mktime()方法的使用教程
2015/05/22 Python
python+pillow绘制矩阵盖尔圆简单实例
2018/01/16 Python
python之文件读取一行一行的方法
2018/07/12 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
Python PyInstaller库基本使用方法分析
2019/12/12 Python
Python利用Scrapy框架爬取豆瓣电影示例
2020/01/17 Python
Tensorflow 实现将图像与标签数据转化为tfRecord文件
2020/02/17 Python
pytorch中index_select()的用法详解
2021/01/06 Python
Nike意大利官网:Nike.com IT
2020/01/19 全球购物
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
2014世界杯球队球队口号
2014/06/05 职场文书
项目投资意向书范本
2015/05/09 职场文书
2016年清明节期间群众祭祀活动工作总结
2016/04/01 职场文书
《岳阳楼记》原文、译文赏析
2019/09/10 职场文书
晶体管来复再生式二管收音机
2021/04/22 无线电
PHP实现两种排课方式
2021/06/26 PHP
CSS布局之浮动(float)和定位(position)属性的区别
2021/09/25 HTML / CSS
关于CentOS 8 搭建MongoDB4.4分片集群的问题
2021/10/24 MongoDB