맞춤형 원형 진행률 표시줄을 생성하는 WeChat 미니 프로그램

이 기사에서는 특정 참조 값이 있는 WeChat 애플릿 - 사용자 정의 원형 진행률 표시줄에 대한 자세한 설명을 주로 소개합니다. 구현 아이디어는 먼저 아래쪽 회색 원 배경을 그린 다음 위쪽 파란색을 그리는 것입니다. 진행 스트립.

JS코드:

Page({
 data: {},
 onLoad: function (options) {
  // 页面初始化 options为页面跳转所带来的参数
 },
 onReady: function () {
  
  // 页面渲染完成
  var cxt_arc = wx.createCanvasContext('canvasArc');//创建并返回绘图上下文context对象。
  cxt_arc.setLineWidth(6);
  cxt_arc.setStrokeStyle('#d2d2d2');
  cxt_arc.setLineCap('round')
  cxt_arc.beginPath();//开始一个新的路径
  cxt_arc.arc(106, 106, 100, 0, 2*Math.PI, false);//设置一个原点(106,106)，半径为100的圆的路径到当前路径
  cxt_arc.stroke();//对当前路径进行描边
    
  cxt_arc.setLineWidth(6);
  cxt_arc.setStrokeStyle('#3ea6ff');
  cxt_arc.setLineCap('round')
  cxt_arc.beginPath();//开始一个新的路径
  cxt_arc.arc(106, 106, 100, -Math.PI * 1 / 2, Math.PI*6/5, false);
  cxt_arc.stroke();//对当前路径进行描边
  
  cxt_arc.draw();
    
 },
 onShow: function () {
  // 页面显示
 },
 onHide: function () {
  // 页面隐藏
 },
 onUnload: function () {
  // 页面关闭
 }
})

페이지 레이아웃:

<view class="wrap">
 <view class="top">
  <canvas class="cir" style="width:212px; height:212px;" canvas-id="canvasArc">
  </canvas>
  
  <view class="cc">中间</view>
  
 </view>
</view>

CSS 스타일:

.cir{
 display: inline-block;
 margin-top: 20rpx;
  
}
  
.top{
 text-align: center
}
  
.cc{
   
 margin-top: -120px;
   
}

위 내용은 맞춤형 원형 진행률 표시줄을 생성하는 WeChat 미니 프로그램의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!