本文实例为大家分享了小程序自定义圆形进度条的具体代码,供大家参考,具体内容如下
circle.wxss:
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; }
circle.wxml:
<view class="wrap"> <view class="circle-box"> <canvas class="circle" style="z-index: -99; width:200px; height:200px;" canvas-id="canvasCircle"> </canvas> <canvas class="circle" style="width:200px; height:200px;" canvas-id="canvasArcCir"> </canvas> <view class="draw_btn"> <view>80分</view> <view>(满分100分)</view> </view> </view> </view>
circle.js:
// pages/circle/circle.js //获取应用实例 const app = getApp() var ctx = wx.createCanvasContext('canvasArcCir'); Page({ /** * 页面的初始数据 */ data: { }, drawCircle: function() { 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(); //圆心的 x,y坐标,radius半径 s:起始弧度,单位弧度(在3点钟方向) e:终止弧度,:false弧度的方向是否是逆时针 ctx.arc(x, y, radius, s, e, false); ctx.stroke() ctx.draw() } var step = 70, startAngle = 1.5 * Math.PI, endAngle = 0, n = 100, endAngle = step * 2 * Math.PI / n + 1.5 * Math.PI; drawArc(startAngle, endAngle); }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { //调用画圆的方法 this.drawCircle() }, /** * 生命周期函数--监听页面初次渲染完成 */ 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(); }, })
为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持站长技术。
tab栏: 代码: !DOCTYPE html html lang="en" head meta charset="UTF-8" titleT...
Python 笔记——正则表达式 一.简单理解 二. re.findall函数 三.普通字符与元字...
1.1 5G时代FPGA需求分析 1.1.1 本节目录 1)本节目录; 2)本节引言; 3)FPGA简...
1、CSS3中过渡属性 transition-timing-function的值包括哪些 A. ease B. inline ...
字符匹配: . :匹配任意单个字符 [] :匹配指定范围内的任意单个字符; [^]:匹...
每周学习4.1-4.7 阅读backbone相关网络模型(轻量级网络MobileNetv1,v2,v3和Shuff...
根本不利于使用,Servlet应该本是为简化工作而创造的啊!我当时觉得是我的设计框...
秒杀活动可以说在互联网上随处可见,从12306抢票,到聚划算抢购,我们生活的方方...
一、git merge 命令应用的三种情景 1.1 “快进”(无冲突) master分支 假设现在只...
一般来说我们的项目都有登录过滤器,一般请求足以搞定。但是AJAX却是例外的,所...