• 6月温州市区普通商品住房地块集中出让 2019-07-13
  • 山西省地勘局211队举办“安全生产月”知识培训--黄河新闻网 2019-07-13
  • 商务部新闻发言人就6月15日美方公布对华贸易措施发表谈话 2019-07-08
  • 习近平春节前夕赴河北张家口看望慰问基层干部群众 2019-07-08
  • 城市卡可在天津地铁2、3号线充值 19日起自助终端投用 2019-06-24
  • 两岸军事敏感之际,岛内四大情报头目全要换人 2019-06-24
  • 西藏职业技术学院全面推进毕业生就业创业 2019-06-23
  • 揭秘人民币制作过程 从“白纸”到钞票耗时1个月 2019-06-23
  • 林志玲现身机场穿粉色上衣变活力少女 2019-06-21
  • 陈扬勇谈“党的领导是中国特色社会主义最本质的特征” 2019-06-20
  • 提高认识 聚焦“精准” 坚决打赢脱贫攻坚战 2019-06-16
  • 农村土地权确权将给农民带来什么? 2019-05-31
  • 空调还装墙壁上?聪明人都是往这里装,好看又省地 ——凤凰网房产 2019-05-20
  • 打开书籍,了解文物背后的中国温度 2019-05-20
  • 女性之声——全国妇联 2019-05-14
  • 欢迎您访问南京安优网络官方网站,本公司专注于:网站制作、小程序开发、网站推广。 24小时服务热线:400-8793-956
    当前位置:3d组六走势图 > 资讯中心 > 网站知识
    微信小程序使用二次贝塞尔曲线绘制波
    来源:3d组六走势图 时间:2019-06-25 08:25:15

    3d组六走势图 www.flqn.net 这两个星期做了一个新项目,工作人员比较紧张,除了需求和UI,前端和后端一个人要做。

    确定项目要求后,UI设计了几天相隔的UI界面。当我得到UI效果图时,我看到有一个波形效果的界面。刚才那是干什么???想想IT界最近的热门事件:Android程序员需要根据用户手机外壳的颜色自动更改APP的主题,并立即觉得绘制波浪根本不是问题。
     
    二次贝塞尔曲线
     
    关于微信官方第二贝塞尔曲线图的连接
     
    画波浪
     
    思路:
     
    在屏幕左侧绘制一个波形并将其直接移动到屏幕右侧。X的值依次从负值增加到正值; 这个操作一直在重复。
     
    我画的波浪如下。

    接口代码是(index.wxml):
     
    <view>
     <view>
      <canvas canvas-id="myCanvas3"></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)
     },
     /**
      * Draw big waves
      */
     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()
      }
      // Filling seawater
      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)
     }
    })
    以上是南京小程序开发今天写的全部内容。我希望它对每个人的学习都有所帮助。

    本文地址://www.flqn.net/web/2567.html
    Tag:
    专业服务:3d组六走势图,3d组六走势图,3d组六走势图
    联系电话:025-65016872
    上一篇: 南京网站制作提示2019年推动内容营销的博客
    下一篇: 返回列表
    最新案例
    泰杰赛
    泰杰赛
    苏派教育
    苏派教育
    全国大学生公共卫生大赛
    全国大学生公共卫生大赛
    南京德普筒仓建安工程有限公司
    南京德普筒仓建安工程有限公司
    中国非金属材料南京矿山工程有限公司
    中国非金属材料南京矿山工程有限公司
    你可能感兴趣
    南京小程序开发公司教你微信程序中SVG的矢量图标方法
    南京网站制作认为是时候从新设计公司网站了
    为什么响应式网站是多设备世界的关键
    20个免费的在线UI / UX设计工具,以建立用户友好的网站
    为什么需要不断重新设计网站?
    最终行动呼吁指南 - 如何创建有效的CTA
    什么是视差滚动和视差滚动网页设计的好处
    网站设计的5个最佳实践(和3个可怕的)
    最后更新
    微信小程序使用二次贝塞尔曲线绘制波 南京网站制作提示2019年推动内容营销的博客 南京网站建设:如果您不是主题专家,您可以写内容吗? 网站制作是如何重新调整内容以获得最佳性能 网站建设是如何使用博客类别来优化您的内容策略 南京网站建设一致强调实习生不能写你的营销博客 南京网站制作分享要求客户角色开发的18个问题 营销投资回报率:利用归属感找到最佳渠道
    服务项目
    3d组六走势图 营销型网站 微信营销 IDC网站 精品案例
  • 6月温州市区普通商品住房地块集中出让 2019-07-13
  • 山西省地勘局211队举办“安全生产月”知识培训--黄河新闻网 2019-07-13
  • 商务部新闻发言人就6月15日美方公布对华贸易措施发表谈话 2019-07-08
  • 习近平春节前夕赴河北张家口看望慰问基层干部群众 2019-07-08
  • 城市卡可在天津地铁2、3号线充值 19日起自助终端投用 2019-06-24
  • 两岸军事敏感之际,岛内四大情报头目全要换人 2019-06-24
  • 西藏职业技术学院全面推进毕业生就业创业 2019-06-23
  • 揭秘人民币制作过程 从“白纸”到钞票耗时1个月 2019-06-23
  • 林志玲现身机场穿粉色上衣变活力少女 2019-06-21
  • 陈扬勇谈“党的领导是中国特色社会主义最本质的特征” 2019-06-20
  • 提高认识 聚焦“精准” 坚决打赢脱贫攻坚战 2019-06-16
  • 农村土地权确权将给农民带来什么? 2019-05-31
  • 空调还装墙壁上?聪明人都是往这里装,好看又省地 ——凤凰网房产 2019-05-20
  • 打开书籍,了解文物背后的中国温度 2019-05-20
  • 女性之声——全国妇联 2019-05-14
  • 体彩宁夏11选5开奖查询 江苏7位数3OO期走势图 九十五期码报 双色球跟号码10年 甘肃11选5手机怎么玩 黑龙江体彩61开奖时间 云南彩票中奖情况 中彩网福彩开奖公告 任选9场第11067期 四川新11选5 期黄大玖世特码诗 时时彩号码边中怎么分 mfc五子棋开发 羽毛球制作公司 六肖中特碼119期