在小程序中用canvas画一个仪表盘

本意是打算写一个类似f2的半圆进度条，但是感觉小程序中引入太难调了，所以就自己用canvas随便画了一个实现了类似的效果。

最终效果图

wxml

    <view class="top-box"><canvas class="canvas-box" canvas-id='canvas'></canvas><view class="nx" style="left:{{(app.globalData.windowWidth)/2 - 50}}px;top: 140px;">{{nx}}%</view></view>

js

  onReady: function () { this.initCanvas()},initCanvas() {let windowsWidth = app.globalData.windowWidthlet offset =  0.1  // 偏移let r = 140  // 半径const ctx = wx.createCanvasContext('canvas')ctx.arc(windowsWidth / 2, 175, r, Math.PI * 1 - offset, computedC(1))ctx.setStrokeStyle('#F8F9FC')ctx.setLineCap('round')ctx.setLineWidth(10)ctx.stroke()ctx.draw(true)let x = 0let ex = util.dayForMonth(new Date())let timer = setInterval(()=>{const ctxs = wx.createCanvasContext('canvas')  if(x >= ex){clearInterval(timer)}this.setData({nx:(x * 100).toFixed(1)})ctxs.arc(windowsWidth / 2, 175, r, Math.PI * 1 - offset, computedC(x))ctxs.setLineWidth(10)ctxs.setLineCap('round')ctxs.setStrokeStyle('#07C160')ctxs.stroke()ctxs.draw(true)x += 0.001},5)const ctxfont = wx.createCanvasContext('canvas')ctxfont.setFontSize(20)ctxfont.setFillStyle('#fff')ctxfont.setTextAlign('center')ctxfont.setTextBaseline('middle')ctxfont.fillText(`本月进度`, windowsWidth / 2, 110)ctxfont.draw(true)function computedC(num) {return Math.PI * (num + 1) + offset}},

utils.js

const dayForMonth = date => {function $in(array, value) {return array.indexOf(value) !== -1}const year = date.getFullYear()const month = date.getMonth() + 1const day = date.getDate()const thx = [1, 3, 5, 7, 8, 10, 12]const twx = [4, 6, 9, 11]if ($in(thx, month)) {return (day/31).toFixed(4)}else if ($in(twx, month)) {return (day/30).toFixed(4)}else{if(year%4 === 0){return (day/29).toFixed(4)}else{return (day/28).toFixed(4)}}
}

wxss

.top-box{display: flex;margin: 0 auto;border-radius: 1%;color: #fff;width: 100vw;height: 220px;background-image: linear-gradient(#FF8B00, #FFCE00);
}.canvas-box{display: flex;margin: 0 auto;width: 100%;height: 220px;
}.nx{position: absolute;width: 100px;text-align: center;color: #fff;font-size: 40px;font-family: bold;
}

在小程序中用canvas画一个仪表盘相关推荐

关于星空的java小程序_[Java教程]小程序使用Canvas画饼图_星空网
小程序使用Canvas画饼图 2018-10-24 0 先上效果图 -------------------------------------------------------------w --- ...
微信小程序图片转换成文字_微信小程序中用canvas将文字转成图片，文字自动换行...
onReady: function () { wx.showLoading({ title: '生成图片中...', }) var that = this const ctx = wx.createC ...
微信小程序利用canvas画出根据文字自适应的边框
1.需求生成海需要画出一个中空带边框的的tag,如下图.众所周知,微信小程序里的canvas画图都是需要自己一点点画出来,不想html有htmlToCanvas,直接写HTML就可以转成canvas ...
微信小程序使用canvas画海报分享图
项目场景: 很多小程序都会有一些分享海报的需求.因为我这边之前一直都是后端直接生成一张图片然后返回了的,我前端直接把路径放上去就可以了.但是,有时候后端没直接生成海报,而是只生成了一个二维码,这时候就 ...
微信小程序使用canvas画不规则图形
一.根据UI在海报中画不同的图片形状的路径,这中用css很简单,用canvas画的话就要了解canvas中的几个方法, 效果图: 代码如下: Page({canvasIdErrorCallback(e ...
微信小程序使用canvas画圆形倒计时动画
参考文档:https://www.cnblogs.com/quietxin/p/9418813.html 效果: wxml页面 <view class="container" ...
微信小程序利用canvas绘制一个动画百分比圆圈
效果图(动态的圆圈) <template> <view class='circleBar'><view class="wrap"><vie ...
微信小程序利用canvas绘制一个静态百分比圆圈
效果如图 <view class='circleBar'><view class="wrap"><canvas class="cir&quo ...
新H5中用canvas画一个数字钟表
此文章是参考以往大牛代码,在大牛代码基础上加以更改而成. 本人暂时还是一名技术菜鸟,刚刚踏上web前端这条路才五个月,希望大牛们多多提携... 效果图如下: 话不多说,上代码: <body st ...

在小程序中用canvas画一个仪表盘

最终效果图

wxml

js

utils.js

wxss

在小程序中用canvas画一个仪表盘相关推荐

最新文章

热门文章