微信小程序canvas 画圆形带刻度进度条

.canvas_1{

position: absolute;

width: 120rpx;

height: 120rpx;

background: rgba(255, 00, 0, 0.0);

}

画进度条（我这是固定分为32等分，可以设置变量，分为任意等分）

ratio为px,转RPX比例

 wx.getSystemInfo({success: function (res) {// 获取可使用窗口宽度let clientHeight = res.windowHeight;// 获取可使用窗口高度let clientWidth = res.windowWidth;// 算出比例ratio = 750 / clientWidth;}}）

/*** 画进度条*/
function drawProgress(pro,id) {var context = wx.createCanvasContext(id)var r = 45 / ratio;var x0 = 60 / ratio;var y0 = 60/ ratio;var x;var y;var lineWidth = 18 / ratio;for (var i = 0; i < 32; i++) {context.beginPath();context.setLineWidth(lineWidth)if((i+1)<=pro){context.setStrokeStyle(getColor.getColour(i))}else{context.setStrokeStyle("#252525")}x = x0 - (r * Math.sin((11.25 * (i + 1) - 3) * Math.PI / 180))y = y0 - (r * Math.cos((11.25 * (i + 1) - 3) * Math.PI / 180))// console.log("x0:"+x0+"   y0:"+y0 +"    x:"+x+"    y:"+y)context.moveTo(x, y)context.arc(x0, y0, r, (270 - 11.25 * (i + 1) + 3) * Math.PI / 180, (270 - 11.25 * i) * Math.PI / 180, false)context.stroke();context.closePath();}context.stroke()context.draw()
}

获取每一等分的颜色getColor.js

var arrColor = ["#eb7c3b", "#ea7b3e", "#ea7a41", "#e97845", "#e87648", "#e7744c", "#e67252", "#e57056", "#e46e5a", "#e36c5f", "#e26964", "#e1666a", "#e0646f", "#df6275", "#de5f7b", "#dc5c80", "#db5a86", "#da578c", "#d85297", "#d85396", "#d7509c", "#d7509c", "#d64da1", "#d449ab", "#d347b0", "#d244b5", "#d143b8", "#d040bd", "#cf3fc1", "#ce3dc4", "#ce3cc8","#cd3bca"];function getColour(per){return arrColor[per];
}function getColor(startColor, endColor, maxPer,nowPer) {var R = Math.floor(Math.floor((endColor - startColor) / 65536)% 256 * nowPer / maxPer);var G = Math.floor(Math.floor((endColor - startColor) / 256) % 256 * nowPer / maxPer);var B = Math.floor((endColor - startColor)  % 256 * nowPer / maxPer);var returnR = Math.floor(startColor / 65536)  + R;var returnG = Math.floor(startColor / 256)  % 256 + G;var returnB = startColor % 256 + B;return fix((returnR * 65536 + returnG * 256 + returnB + 0X000000).toString(16),6);
}//数据格式化
function fix(num, length) {return ('' + num).length < length ? ((new Array(length + 1)).join('0') + num).slice(-length) : '' + num;
}module.exports = {getColor: getColor,getColour: getColour,
}

小程序canvas有最高层级，如果有弹窗什么的，将会被canvas遮挡，可以在判断有弹出的时候，将canvas内容转为图片显示在image中，然后隐藏canvas

如下：

.canvas_bg{position: absolute;width: 120rpx;height: 120rpx;background: rgba(55, 00, 55, 0.0);
}.canvas_1{position: absolute;width: 120rpx;height: 120rpx;background: rgba(255, 00, 0, 0.0);
}.canvas_img{position: absolute;width: 120rpx;height: 120rpx;background: rgba(00, 00, 255, 0.0);}

<view class='canvas_and_text'>
<view class='canvas_bg'>
<canvas class='canvas_1'  hidden='{{canvas1Hide}}'   canvas-id="Canvas1"/>
<image class="canvas_img" hidden='{{img1Hide}}'
src="{{canvas1Img}}"
mode="aspectFit"/>
</view>
<text class='text_s'></text></view>

当需要显示弹窗时，调用以下方法，显示image，hide canvas


function handleCanvarToImg() {popupSHow = true;wx.canvasToTempFilePath({x: 0,y: 0,width: 120 / ratio,height: 120 / ratio,canvasId: "Canvas1",success: function (res) {that.setData({img1Hide:false,canvas1Img: res.tempFilePath,canvas1Hide: true,});console.log('Canvas1转图片')}});}

当弹窗取消是，隐藏image ，显示canvas

  popupSHow = false;that.setData({popupDisplay: "hidden",img1Hide: true,canvas1Hide: false,});

微信小程序canvas 画圆形带刻度进度条相关推荐

微信小程序canvas 画动态圆环百分比进度条实例根据手机屏幕宽度自适应放大缩小
这里是wxml代码: <component-analysis-report active="0" bindselectReport="selectReport&qu ...
微信小程序canvas画价格走势图（一）
今天是周二,今天来开一个新坑吧.最近花了整整两个工作日的时间画了一个微信小程序端的价格走势图,现在来分享一下经验. 因为内容比较多,所以打算这次分为多篇博客来写,这样一篇博客的内容就会更少.更清晰.下 ...
微信小程序canvas画价格走势图（六）
到上一篇,可以说,所有的工作已经完成了,那为什么还会有第六篇呢?因为,客户改需求了,UI设计图改了,我也就不得不改代码,画一个新的版本出来.我在大功告成,开始写第一篇的时候突然改的,我也就准备加一篇来 ...
【修复日常bug】微信小程序canvas画商品海报出现个别用户无法生成的情况
微信小程序,在使用canvas画海报的时候,会导致个别用户无法生成的情况,你们可以尝试把绘画某些块的代码注释掉再进行扫码调试,我前几天就遇到个别客户无法生成商品海报的情况,刚开始是以为上一个同事留的坑 ...
微信小程序canvas画价格走势图（三）
今天继续更新在微信小程序上用canvas画价格走势图.上一篇讲了图上主要的部分,也就是折线图的绘制.假如我在我的绘图主函数中只调用了绘制折线图的函数,效果是这样的: 可以说除了作为坐标背景的<i ...
微信小程序|开发实战篇之七-steps进度条组件
开发实战篇之七前言 0.知识点补充 0.1 $emit()函数 0.2 wxs 0.3 ⚡组件间关系 1.steps进度条组件 1.1.step进度条单元的骨架文件wxml 1.2.step进度条单 ...
微信小程序canvas画价格走势图（五）
最近比较忙,所以趁着今年的最后一个周末,来把最后两篇完结掉.这是倒数第二篇了,这一篇的内容很简单,讲的是细节的绘制,也就是底部的刻度线和日期的绘制,以及一个小小的总结. 目前我们完成了canvas的准 ...
微信小程序canvas画图案列,实现生成头像并保存,小程序新版canvas变化,小程序中canvas注意事项
你一定见过很多制作头像的小程序,无论是国庆的红旗,圣诞的帽子,还是疫情的口罩,都可以用小程序生成应景的头像,那么具体的代码是怎么实现的呢?前些天帮别人做了一个生成姓氏头像的功能,里面的实现原理基本一致 ...
微信小程序--canvas 画海报转发好友下载本地
获取本地手机的屏幕宽高(宽高需要按照自己实际需求计算) toCanvas() {let that = thiswx.getSystemInfo({success: function(res) {con ...

微信小程序canvas 画圆形带刻度进度条

微信小程序canvas 画圆形带刻度进度条相关推荐

最新文章

热门文章