微信小程序绘制半圆（弧形）进度条_微信小程序圆形拖动条怎么弄 - CSDN文库

微信小程序

85 浏览量更新于2023-05-03 评论收藏 38KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

微信小程序绘制半圆（弧形）进度条微信小程序绘制半圆（弧形）进度条

本文实例为大家分享了微信小程序绘制半圆进度条的具体代码，供大家参考，具体内容如下

wxml：

<view class="progress">

<canvas canvas-id="canvasProgress" style="width: {{canvasWidth}}rpx; height: {{canvasHeitht}}rpx;"></canvas>

</view>

<view class="progress">

<canvas canvas-id="canvasProgressReal" style="width: {{canvasWidth}}rpx; height: {{canvasHeitht}}rpx;"></canvas>

</view>

js：

Page({

/**

* 页面的初始数据

*/

data: {

canvasWidth: 500,

canvasHeitht: 300,

radioPos: 98,

footNum: 0,

footNumAll: 6000,

myTargetFoot: 10000,

degree: 195,

timer: '',

timerNum: '',

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function(options) {

var that = this;

let widthPX = wx.getSystemInfoSync().windowWidth;

let r = this.data.radioPos = widthPX * (500 / 750) * (300 / 365) * (2 / 4)

var context = wx.createCanvasContext('canvasProgress')

context.translate(24, 6);

context.setStrokeStyle("#fff");

context.setLineWidth(2);

context.beginPath();

for (let i = 195; i >= -15; i--) { //每1度绘制一条线

let degree = i / 360 * Math.PI * 2

let radio = r * 0.92 - r * 0.005 * (210 - i) / 240

context.moveTo(r + radio * Math.cos(degree), r - radio * Math.sin(degree)); //向量加减

context.lineTo(r + r * Math.cos(degree), r - r * Math.sin(degree)); //向量加减

context.stroke();

}

context.draw();

},

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function() {

},

/**

* 生命周期函数--监听页面显示

*/

onShow: function() {

let that = this

//清理

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

评论0

weixin_38748239

粉丝: 3
资源: 943

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈