zoukankan      html  css  js  c++  java
  • 小程序canvas绘制倒计时

    如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人。谢谢大家!❤

    如果解决不了,可以在文末进群交流。

     效果展示:

     //广告倒计时
      advTimeCountDown:function(advTime){
        var step = 1,//计数动画次数
          num = 0,//计数倒计时秒数(n - num)
          start = 1.5 * Math.PI,// 开始的弧度
          end = -0.5 * Math.PI,// 结束的弧度
          time = null;// 计时器容器
    
        var animation_interval = 1000,// 每1秒运行一次计时器
          n = advTime; // 当前倒计时为30秒
        // 动画函数
        function animation() {
          if (step <= n) {
            end = end + 2 * Math.PI / n;
            ringMove(start, end);
            step++;
          } else {
            clearInterval(time);
          }
        };
    
        // 画布绘画函数
        function ringMove(s, e) {
          var context = wx.createCanvasContext('advTimeCanvas')
    
          // 绘制圆环
          context.setStrokeStyle('#fff') //设置线条样式
          context.beginPath() //重新开始新路径,而把之前的路径都清空掉
          context.setLineWidth(3)  //绘制线条宽度
          context.arc(13, 13, 10, s, e, true) //画圆 1圆的中心的 x 坐标。2圆的中心的 y 坐标。3圆的半径。4起始角,以弧度计(弧的圆形的三点钟位置是 0 度)。5结束角,以弧度计。6规定应该逆时针还是顺时针绘图。False = 顺时针,true = 逆时针。
          context.stroke()  //绘制一条路径
          context.closePath()
    
          // 绘制倒计时文本
          context.beginPath()
          context.setLineWidth(1) //绘制线条宽度
          context.setFontSize(10) //设置字号
          context.setFillStyle('#fff')
          context.setTextAlign('center')
          context.setTextBaseline('middle')
          context.fillText(n - num + '', 13, 13, 100) //1规定在画布上输出的文本。2开始绘制文本的 x 坐标位置(相对于画布)。3开始绘制文本的 y 坐标位置(相对于画布)。4可选。允许的最大文本宽度,以像素计。
          context.fill()
          context.closePath()
    
          context.draw()
    
          // 每完成一次全程绘制就+1
          num++;
        };
    
        // 倒计时前先绘制整圆的圆环
        ringMove(start, end);
        time = setInterval(animation, animation_interval);
      },
  • 相关阅读:
    C# List的深复制(转)
    asp.net core控制台项目运行
    进度条界面控件
    给窗体做遮罩(另类做法)
    显示列表控件(引用SourceGrid)
    TimeExit 界面无点击定时退出类
    TimeHelp 获取时间戳转换类
    复旦大学2016--2017学年第一学期高等代数I期末考试情况分析
    复旦大学高等代数历届每周一题汇总
    复旦高等代数 I(16级)每周一题
  • 原文地址:https://www.cnblogs.com/mengyilingjian/p/11699849.html
Copyright © 2011-2022 走看看