小程序画圆

小程序 专栏收录该内容
3 篇文章 0 订阅

建立两个canvas标签,先绘制底层的浅灰色圆圈背景,再绘制上层的红色进度条。

.wxml的代码如下:

1
2
3
4
5
6
7
8
9
< view  class = "wrap" >
   < view  class = "circle-box" >
     < canvas  class = "circle"  style = "width:200px; height:200px;"  canvas-id = "canvasArcCir" >
     </ canvas >
     < canvas  class = "circle"  style = "z-index: -5; width:200px; height:200px;"  canvas-id = "canvasCircle" >
     </ canvas >
     < view  class = "draw_btn"  bindtap = "drawCircle" >开始动态绘制</ view >
   </ view >
</ view >

WXSS代码

特别注意:底层的canvas最好使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
page {
   width: 100%;
   height: 100%;
   background-color:  #fff;
}
  
.circle-box {
   text-align: center;
   margin-top: 10vw;
}
  
.circle {
   position: absolute;
   left: 0;
   right: 0;
   margin: auto;
}
  
.draw_btn {
   width: 35vw;
   position: absolute;
   top: 33vw;
   right: 0;
   left: 0;
   margin: auto;
   border: 1px  #000 solid;
   border-radius: 5vw;
}

js代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
//获取应用实例
var  app = getApp()
  
var  interval;
var  varName;
var  ctx = wx.createCanvasContext( 'canvasArcCir' );
  
Page({
   data: {
   },
   drawCircle:  function  () {
     clearInterval(varName);
     function  drawArc(s, e) {
       ctx.setFillStyle( 'white' );
       ctx.clearRect(0, 0, 200, 200);
       ctx.draw();
       var  x = 100, y = 100, radius = 96;
       ctx.setLineWidth(5);
       ctx.setStrokeStyle( '#d81e06' );
       ctx.setLineCap( 'round' );
       ctx.beginPath();
       ctx.arc(x, y, radius, s, e,  false );
       ctx.stroke()
       ctx.draw()
     }
     var  step = 1, startAngle = 1.5 * Math.PI, endAngle = 0;
     var  animation_interval = 1000, n = 60;
     var  animation =  function  () {
       if  (step <= n) {
         endAngle = step * 2 * Math.PI / n + 1.5 * Math.PI;
         drawArc(startAngle, endAngle);
         step++;
       else  {
         clearInterval(varName);
       }
     };
     varName = setInterval(animation, animation_interval);
   },
   onReady:  function  () {
     //创建并返回绘图上下文context对象。
     var  cxt_arc = wx.createCanvasContext( 'canvasCircle' );
     cxt_arc.setLineWidth(6);
     cxt_arc.setStrokeStyle( '#eaeaea' );
     cxt_arc.setLineCap( 'round' );
     cxt_arc.beginPath();
     cxt_arc.arc(100, 100, 96, 0, 2 * Math.PI,  false );
     cxt_arc.stroke();
     cxt_arc.draw();
   },
   onLoad:  function  (options) {
  
   }
})

注意的要点

1、关于小程序canvas绘制,请观看 微信小程序官方文档绘制

2、开始绘制的路径可以根据 JS代码中的变量startAngle 来选择从哪里开始绘制

用微信小程序实现一个圆形的进度条

圆形进度条的效果图如下:

用微信小程序实现一个圆形的进度条

初始状态

用微信小程序实现一个圆形的进度条

点击中间按钮开始绘制

用微信小程序实现一个圆形的进度条

绘制过程

用微信小程序实现一个圆形的进度条

绘制结束

  • 1
    点赞
  • 1
    评论
  • 3
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值