解决了：微信小程序使用canvas绘制倒计时圆圈和数字居中的实现

微信小程序使用canvas绘制倒计时圆圈和数字居中的实现

1、显示结果

2、过程：
（1）wxml + css

<!-- 每道题 --><view style="background-color: #fff;padding:20rpx;margin:10rpx;border-radius:20rpx;"><!-- 倒计时30秒 --><view style="display: flex;justify-content: center;position: relative;align-items: center;color:#666"><canvas  canvas-id="canvasProgressbg" style="width:180rpx;height:180rpx;position: absolute;"></canvas> <canvas  canvas-id="canvasProgress" style="width:180rpx;height:180rpx;"></canvas></view></view>

（2）js

data: {count:0, // 设置 计数器 初始为0countTimer: null, // 设置 定时器 初始为nulldownTime:30, //倒计时时间down:null,},

//定时器倒计时显示countInterval: function () {// 设置倒计时 定时器 每100毫秒执行一次，计数器count+1 ,耗时6秒绘一圈this.data.countTimer = setInterval(() => {if (this.data.count <= 30) {/* 绘制彩色圆环进度条  注意此处 传参 step 取值范围是0到2，所以 计数器 最大值 60 对应 2 做处理，计数器count=60的时候step=2*/this.drawCircle(this.data.count / (30/2))this.data.count++;this.data.downTime--;this.setData({count:this.data.count,downTime:this.data.downTime}); } else {clearInterval(this.data.countTimer)wx.showToast({title: '时间到',})}}, 1000)},//环的变化drawCircle: function (step){var context = wx.createCanvasContext('canvasProgress');var gradient = context.createLinearGradient(10, 5, 5, 10);gradient.addColorStop("0", "#2661DD"); //设置渐变gradient.addColorStop("0.5", "#40ED94");gradient.addColorStop("1.0", "#5956CC");context.setLineWidth(6); //圆环的宽度context.setStrokeStyle(gradient);context.setLineCap('round')context.beginPath(); // 参数step 为绘制的圆环周长，从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ，结束角 通过改变 step 的值确定context.arc(40, 40, 30, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);context.stroke(); context.draw()var ctx = wx.createCanvasContext('canvasProgressbg')ctx.setLineWidth(8);// 设置圆环的宽度ctx.setStrokeStyle('#eee'); // 设置圆环的颜色ctx.setLineCap('round') // 设置圆环端点的形状ctx.beginPath();//开始一个新的路径ctx.arc(40,40,30, 0, 2 * Math.PI, false);// 以下是数字居中ctx.strokeStyle = '#eee' ctx.lineWidth = 10ctx.lineCap = 'butt' //butt平直 round圆 square方// 设置文字居中但是fillText的第二个参数必须为画布宽度一半ctx.textAlign = 'center'ctx.font = 'bold 16px Arial'ctx.fillStyle = '#666' //文本颜色ctx.fillText(this.data.downTime, 40, 45) //fillText里面的可填写的值是，文本内容，x坐标，y坐标，文本最大宽度ctx.font = '16px Arial'ctx.fillStyle = '#FFFFFF'ctx.stroke();//对当前路径进行描边ctx.draw();},

onShow: function () {this.countInterval() //调用},

2021.08.30

解决了：微信小程序使用canvas绘制倒计时圆圈和数字居中的实现相关推荐

html5绘制图形幸运大转盘,微信小程序利用canvas 绘制幸运大转盘功能
小程序对 canvas api 跟h5的不太一致 ,所以这个搞的比较久,不多说,先贴代码 Page({ /** * 页面的初始数据 */ data: { awardsConfig: {}, resta ...
微信小程序使用canvas绘制二维码实现跳转小程序
开始接到这个需求的时候,我查阅文档获取小程序码 | 微信开放文档发现两种途径需要后端在服务器上调用接口拿到二维码,因为调用的 https://api.weixin.qq.com这个域名是不允许上白 ...
微信小程序使用canvas绘制海报并保存本地相册
在做微信小程序的时候,很多都会用到生成海报分享功能,刚好最近项目有这个需求,今天就发出来记录下首先是使用canvas绘制一张海报,微信小程序的canvas有老版本和新版本我是用的是新版本代码如下 ...
微信小程序新版canvas绘制图片方法
截至2022.12.23 修改日微信小程序开发文档介绍不全,导致很多用户绘制图片不显示或失败,因此写下截至目前的可行方案 <canvas type="2d" id=&quo ...
微信小程序使用canvas绘制分享海报
一.准备工作最近在做的一个vue项目中,需要做一个分享海报,头秃!!! 首先确定海报那些地方是随机变动的.海报背景.引用二维码生成组件(目前市场上有很多生成二维码的组件,这个项目用的是uqrcode ...
微信小程序2D canvas绘制分享海报
效果图: wxml <view><canvas type="2d" id="canvas_box" style="width:260 ...
微信小程序通过canvas绘制所需图片形状。（文章以直角梯形进行说明）
通过这种方法可以快捷的完成一些设计的效果. index.wxml //新建一个画板. 1 <canvas canvas-id="myCanvas" style="b ...
微信小程序使用canvas绘制圆角矩形在Android：变形、锯齿
这两天用小程序实现分享生成海报,那我的手机测的一直没问题,结果后来用同事的小米测发现:画的图形缺个角,锯齿形的,根据小程序社区回复:使用ctx.arc + ctx.lineTo就能避免Android错 ...
微信小程序新版canvas绘制图片方法
今天在做项目使用到了canvas绘制二维码,发现以前的方法被弃用了. wxml: <canvas type="2d" id="myCanvas" styl ...

解决了：微信小程序使用canvas绘制倒计时圆圈和数字居中的实现

解决了：微信小程序使用canvas绘制倒计时圆圈和数字居中的实现相关推荐

最新文章

热门文章