微信小程序利用canvas绘制一个动画百分比圆圈

效果图（动态的圆圈）

<template>     <view class='circleBar'><view class="wrap"><view class="top"><canvas class="cir" class="cancas_wh" canvas-id="canvasArc1"></canvas><view class="centerWord">100%</view></view></view></view>
</template>

js部分

  data = { cxt_xx: 47,cxt_rr: 41,timer: 0,
}

  showScoreAnimation1(maxNum) {let that = thislet copyRightItems = 0that.timer = setInterval(function() {copyRightItems++if (copyRightItems == maxNum) {clearInterval(that.timer)} else {// 页面渲染完成// 这部分是灰色底层let cxt_arc = wx.createCanvasContext('canvasArc1') //创建并返回绘图上下文context对象。cxt_arc.setLineWidth(6) //绘线的宽度cxt_arc.setStrokeStyle('#cccccc') //绘线的颜色cxt_arc.setLineCap('round') //线条端点样式cxt_arc.beginPath() //开始一个新的路径cxt_arc.arc(that.cxt_xx,that.cxt_xx,that.cxt_rr,0,2 * Math.PI,false) //设置一个原点(53,53)，半径为50的圆的路径到当前路径cxt_arc.stroke() //对当前路径进行描边//这部分是绿色部分cxt_arc.setLineWidth(6)cxt_arc.setStrokeStyle('#509234')cxt_arc.setLineCap('round')cxt_arc.beginPath() //开始一个新的路径console.log(copyRightItems, 'copyRightItems')cxt_arc.arc(that.cxt_xx,that.cxt_xx,that.cxt_rr,(-Math.PI * 1) / 2,2 * Math.PI * (copyRightItems / 100) - (Math.PI * 1) / 2,false)cxt_arc.stroke() //对当前路径进行描边cxt_arc.draw()}}, 20)that.$apply()}

css部分

.circleBar {width: 185rpx;height: auto;overflow: hidden;position: relative;
}
.cancas_wh {width: 212rpx;height: 212rpx;
}
.cir {display: inline-block;background-color: #fff;border-radius: 100%;
}
.centerWord {width: 100%;position: absolute;top: 70rpx;left: 5rpx;text-align: center;color: #509234;
}

使用

  onLoad() {  let totalItems = 100//最终加载到100%位置，可以任意修改this.showScoreAnimation1(totalItems)
}

效果图

微信小程序利用canvas绘制一个动画百分比圆圈相关推荐

微信小程序利用canvas绘制一个静态百分比圆圈
效果如图 <view class='circleBar'><view class="wrap"><canvas class="cir&quo ...
html5绘制图形幸运大转盘,微信小程序利用canvas 绘制幸运大转盘功能
小程序对 canvas api 跟h5的不太一致 ,所以这个搞的比较久,不多说,先贴代码 Page({ /** * 页面的初始数据 */ data: { awardsConfig: {}, resta ...
小程序利用canvas 绘制图案（生成海报，生成有特色的头像）
小程序利用canvas 绘制图案 (生成海报, 生成有特色的头像) 微信小程序生成特色头像,海报等是比较常见的.下面我来介绍下实现该类小程序的过程. 首先选择前端来通过 canvas 绘制.这样比较节 ...
解决了：微信小程序使用canvas绘制倒计时圆圈和数字居中的实现
微信小程序使用canvas绘制倒计时圆圈和数字居中的实现 1.显示结果 2.过程: (1)wxml + css <view style="backg ...
微信小程序使用canvas绘制二维码实现跳转小程序
开始接到这个需求的时候,我查阅文档获取小程序码 | 微信开放文档发现两种途径需要后端在服务器上调用接口拿到二维码,因为调用的 https://api.weixin.qq.com这个域名是不允许上白 ...
微信小程序利用canvas实现六边形蜘蛛图
微信小程序利用canvas实现六边形蜘蛛图发布时间:2018-01-24 14:30:29 1..wxml <canvas style="width: 200px; height: ...
微信小程序使用canvas绘制海报并保存本地相册
在做微信小程序的时候,很多都会用到生成海报分享功能,刚好最近项目有这个需求,今天就发出来记录下首先是使用canvas绘制一张海报,微信小程序的canvas有老版本和新版本我是用的是新版本代码如下 ...
微信小程序利用canvas画出根据文字自适应的边框
1.需求生成海需要画出一个中空带边框的的tag,如下图.众所周知,微信小程序里的canvas画图都是需要自己一点点画出来,不想html有htmlToCanvas,直接写HTML就可以转成canvas ...
微信小程序使用canvas制作拼图动画
效果如上图制作思路: 1. 制作9个由特殊图形拼成的九宫格,包含灰色模糊和彩色高亮:2.生成小拼图并进行一系列变化实现蓄能弹起的动画效果:3.将生成的拼图拼贴在对应的位置上,产生破碎动画特效准备工 ...

微信小程序利用canvas绘制一个动画百分比圆圈

微信小程序利用canvas绘制一个动画百分比圆圈相关推荐

最新文章

热门文章