小程序
小游戏
企业微信
微信支付
扫描小程序码分享
先说一下想要的效果
这是在别人的 数据都是渲染的 这样的效果是正确的
这个效果怎么做呢
求大佬帮忙解决 感谢
2 个回答
canvas自己画
内容中可能包含密钥、AppSecret等私密参数,泄漏会有安全风险,请检查内容并确认。
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
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