小程序
小游戏
企业微信
微信支付
扫描小程序码分享
先说一下想要的效果
这是在别人的 数据都是渲染的 这样的效果是正确的
这个效果怎么做呢
求大佬帮忙解决 感谢
3 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
简单易用,希望能帮到你,喜欢的话给个star
https://github.com/lucaszhu2zgf/mp-progress
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
canvas自己画
https://www.xiabingbao.com/css/2015/07/27/css3-animation-circle.html
https://sevenhao.github.io/qhao/web/css-aritcle/css-property/CSS%E5%AE%9E%E7%8E%B0%E5%9C%86%E5%BD%A2%E8%BF%9B%E5%BA%A6%E6%9D%A1.html
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
简单易用,希望能帮到你,喜欢的话给个star
https://github.com/lucaszhu2zgf/mp-progress
canvas自己画
drawProgressbg: function () {
// 使用 wx.createContext 获取绘图上下文 context
var ctx = wx.createCanvasContext('canvasProgressbg')
ctx.setLineWidth(4);// 设置圆环的宽度
ctx.setStrokeStyle('#fff'); // 设置圆环的颜色
ctx.setLineCap('round') // 设置圆环端点的形状
ctx.beginPath();//开始一个新的路径
ctx.arc(110, 110,50, 1 * Math.PI, 0 * Math.PI, false);
//设置一个原点(110,110),半径为100的圆的路径到当前路径
ctx.stroke();//对当前路径进行描边
ctx.draw();
},
drawCircle: function (step) {
var context = wx.createCanvasContext('canvasProgress', this);
// 设置渐变
var gradient = context.createLinearGradient(200, 100, 100, 200);
gradient.addColorStop("0", "#2661DD");
// gradient.addColorStop("0.5", "#40ED94");
// gradient.addColorStop("1.0", "#5956CC");
context.setLineWidth(4);
context.setStrokeStyle(gradient);
context.setLineCap('round')
context.beginPath();
// 参数step 为绘制的圆环周长,从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ,结束角 通过改变 step 的值确定
context.arc(110, 110, 50, 1 * Math.PI, step * Math.PI, false);
context.stroke();
context.draw()
},
https://www.xiabingbao.com/css/2015/07/27/css3-animation-circle.html
https://sevenhao.github.io/qhao/web/css-aritcle/css-property/CSS%E5%AE%9E%E7%8E%B0%E5%9C%86%E5%BD%A2%E8%BF%9B%E5%BA%A6%E6%9D%A1.html