小程序canvas绘制环形进度条

原创 2018年04月17日 16:26:54

       最近微信小程序是真的很火!依稀还记得自己第一次写android的环形对比图(点击打开链接),一晃两年已经过去了。时间过得真快。第一次写博客的时候还是上大三的时候。现在已经工作将近三年了。最近半年由于工作的原因很少写博客,那么现在同样从环形图开始撸小程序,废话少说,直接上图……

1.首先创建目录如下所示:


2.编写canvas.json的内容

{
  "backgroundTextStyle": "light",
  "navigationBarBackgroundColor": "#34343D",
  "navigationBarTitleText": "canvas加载中",
  "navigationBarTextStyle": "white"
}

3.编写canvas.wxml的内容

<!--pages/blog1/canvas.wxml-->

<view class='container'>
    <view class='progress_box'>
      <!-- 绘制圆环背景 -->
      <canvas class="progress_bg" canvas-id="canvasProgressbg" />
      <!-- 绘制加载中圆弧 -->
      <canvas class="progress_canvas" canvas-id="canvasProgress" /> 
      <!-- 绘制圆弧中心提示文字 -->
      <view class="progress_text">
        <text class='progress_info'> {{progress_txt}}</text>
      </view>
    </view>
</view>

4.编写canvas.wxss的内容

/* pages/blog1/canvas.wxss */

.container {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #34343d;
}

.progress_box {
  position: absolute;
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
}

.progress_bg {
  position: absolute;
  width: 220px;
  height: 220px;
}

.progress_canvas {
  width: 220px;
  height: 220px;
}

.progress_text {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress_info {
  font-size: 35rpx;
  padding-left: 16rpx;
  letter-spacing: 2rpx;
  color: white;
}
4.编写canvas.js的内容
// pages/blog1/canvas.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    //控制progress
    count: 0, // 设置 计数器 初始为0
    countTimer: null,// 设置 定时器
    progress_txt: '加载中...',// 提示文字
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //绘制背景
    this.drawProgressbg();
    //开始progress
    this.startProgress();
  },

  /**
  * 画progress底部背景
  */
  drawProgressbg: function () {
    // 使用 wx.createContext 获取绘图上下文 context
    var ctx = wx.createCanvasContext('canvasProgressbg')
    // 设置圆环的宽度
    ctx.setLineWidth(7);
    // 设置圆环的颜色
    ctx.setStrokeStyle('#000000');
    // 设置圆环端点的形状
    ctx.setLineCap('round')
    //开始一个新的路径
    ctx.beginPath();
    //设置一个原点(110,110),半径为100的圆的路径到当前路径
    ctx.arc(110, 110, 80, 0, 2 * Math.PI, false);
    //对当前路径进行描边
    ctx.stroke();
    //开始绘制
    ctx.draw();
  },

  /**
   * 画progress进度
   */
  drawCircle: function (step) {
    // 使用 wx.createContext 获取绘图上下文 context
    var context = wx.createCanvasContext('canvasProgress');
    // 设置圆环的宽度
    context.setLineWidth(7);
    // 设置圆环的颜色
    context.setStrokeStyle('#FBE6C7');
    // 设置圆环端点的形状
    context.setLineCap('round')
    //开始一个新的路径
    context.beginPath();
    //参数step 为绘制的圆环周长,从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ,结束角 通过改变 step 的值确定
    context.arc(110, 110, 80, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);
    //对当前路径进行描边
    context.stroke();
    //开始绘制
    context.draw()
  },

  /**
   * 开始progress
   */
  startProgress: function () {
    this.setData({
      count: 0
    });
    // 设置倒计时 定时器 每100毫秒执行一次,计数器count+1 ,耗时6秒绘一圈
    this.countTimer = setInterval(() => {
      if (this.data.count <= 60) {
        /* 绘制彩色圆环进度条  
        注意此处 传参 step 取值范围是0到2,
        所以 计数器 最大值 60 对应 2 做处理,计数器count=60的时候step=2
        */
        this.drawCircle(this.data.count / (60 / 2))
        this.data.count++;
      } else {
        clearInterval(this.countTimer);
        this.startProgress();
      }
    }, 100)
  },

})
好了!大功告成,收摊回家……


版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u012483116/article/details/79974936

用Canvas画圆环百分比进度条

canvas圆环进度 *{padding: 0; margin: 0; } .circle{width: 200px;height: 200px;margin: 20em auto;p...
  • yusirxiaer
  • yusirxiaer
  • 2017-07-17 16:48:50
  • 686

canvas画环形进度条

  • 2017年08月28日 15:03
  • 32KB
  • 下载

canvas动态绘制环形进度条

在做项目的过程中,遇到以下的需求:根据等级绘制环形进度条。下面把代码粘贴如下: 代码如下: var ctx = document.getElemen...
  • cotexarm7
  • cotexarm7
  • 2017-11-27 11:21:09
  • 152

canvas实现环形进度条

html文件: 进度条 --> 设置进度值: 设置颜色值: css文件: .Container { position: absolute;...
  • zyq19931019
  • zyq19931019
  • 2016-03-28 17:23:33
  • 955

HTML5 Canvas绘制环形进度条

最近比较迷恋canvas,加之做了一个个人网站,有用到环形 进度条,记录下来。canvas中没有直接绘制圆的方法,但有一个绘制弧线的context.arc方法, 下面讲下用该方法如何绘制出图片效果...
  • chuan2009he
  • chuan2009he
  • 2015-04-15 21:34:34
  • 2141

canvas绘制圆环进度条

圆环进度表示是现在常用的一种进度标识方法, 绘制圆环进度条 function drawRing(w,h,val){ //先创建一个can...
  • Doulvme
  • Doulvme
  • 2017-02-21 12:14:48
  • 2175

JS利用CANVAS 画环形进度条

window.onload = function() { var t = 99; var oC = document.getElementById('c1'); var oGC = oC.get...
  • sxl0727
  • sxl0727
  • 2016-07-13 12:29:09
  • 1278

小程序中canvas绘制网络图片

小程序中,canvas绘制图片,可使用drawImage方法,但是绘制网络图片时,在手机端不会显示,需要先将网络图片下载到本地,然后用图片的本地路径绘制。如下伪代码:function downLoad...
  • IT_1692
  • IT_1692
  • 2018-03-20 13:29:02
  • 42

微信小程序之基于canvas绘制高铁线路图

前几天@天下雪 给了我一张高铁的路线图,问我能不能用canvas画出来,所以我就试了试,我的思路可能比较复杂;如果有更简单的思路可以留言回复;  下面说一下我的实现思路:  1、首先是每个站点圆角矩形...
  • u012118993
  • u012118993
  • 2017-02-20 20:26:36
  • 609

小程序九:导航&地图&画布

小程序九:导航&地图&画布
  • Zhao1234567890123456
  • Zhao1234567890123456
  • 2016-11-12 17:50:11
  • 598
收藏助手
不良信息举报
您举报文章:小程序canvas绘制环形进度条
举报原因:
原因补充:

(最多只允许输入30个字)