小程序 mpvue 使用canvas绘制环形图表

本来想用css3来实现，发现轮廓边上残影严重，所以直接用小程序的canvas使用来。
最终效果如下：

我的整页代码如下，里面已经写出备注来。

<template><div class="statistic"><canvas canvas-id="runCanvas" id="runCanvas" class='canvas'></canvas></div>
</template>
<script>export default {data() {return {}},methods: {run(x0, y0, nowPercent) {// 1° 设置配置参数// 环形的线宽度const lineWidth = 16;// 半径const radius = x0 - lineWidth;// 起始弧const sAngle = -0.5 * Math.PI;// 终止弧let eAngle = (2 * Math.PI / 100 * nowPercent) - 0.5 * Math.PI;// 2° 画圆环阴影this.ctx2.setLineWidth(16);this.ctx2.setStrokeStyle('#d2d2d2');this.ctx2.setLineCap('round')this.ctx2.arc(x0, y0, radius, 0, 2 * Math.PI, false);//对当前路径进行描this.ctx2.stroke();// 3° 画圆环激活高亮部分this.ctx2.beginPath();//开始一个新的路径this.ctx2.setLineWidth(16);this.ctx2.setStrokeStyle('#00D49F');this.ctx2.setLineCap('round')this.ctx2.arc(x0, y0, radius, sAngle, eAngle, false);this.ctx2.stroke();// 4° 设置环心字体this.ctx2.beginPath();// 字体大小 注意不要加引号this.ctx2.font = 'normal bold 40px sans-serif';// 字体颜色this.ctx2.setFillStyle("#00D49F");// 字体位置this.ctx2.setTextAlign("center");// 字体对齐方式this.ctx2.setTextBaseline("middle");// 文字内容和文字坐标this.ctx2.fillText(nowPercent + "%", x0, y0);// 5°最后通过draw把上面的描述绘制出来this.ctx2.draw();},draw(id, percent) {this.ctx2 = wx.createCanvasContext(id);const that = this;wx.createSelectorQuery().select('#' + id).boundingClientRect(function (rect) { //监听canvas的宽高// 获取圆心坐标var x0 = parseInt(rect.width / 2); //获取canvas宽的的一半var y0 = parseInt(rect.height / 2); //获取canvas高的一半，// 开始画画that.run(x0, y0, percent);}).exec();},},mounted() {this.draw('runCanvas', 50);}
}
</script><style lang="less" scoped>.canvas {width: 150px;height: 150px;position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: auto auto;z-index: 99;}
</style>
<style lang="less">page {background: white;}
</style>

小程序 mpvue 使用canvas绘制环形图表相关推荐

在H5、微信小程序中使用canvas绘制二维码、分享海报
在H5.微信小程序中使用canvas绘制二维码.分享海报文章目录在H5.微信小程序中使用canvas绘制二维码.分享海报前言一.canvas绘制二维码 1.H5中使用canvas 2.微信小程 ...
微信小程序之基于canvas绘制高铁线路图
前几天@天下雪给了我一张高铁的路线图,问我能不能用canvas画出来,所以我就试了试,我的思路可能比较复杂:如果有更简单的思路可以留言回复: 关注微信公众号,获取源码和教程下面说一下我的实现思路: ...
小程序之基于canvas绘制高铁线路图
前几天@天下雪给了我一张高铁的路线图,问我能不能用canvas画出来,所以我就试了试,我的思路可能比较复杂:如果有更简单的思路可以留言回复: 关注微信公众号,获取源码和教程下面说一下我的实现思路: ...
用微信小程序开发的Canvas绘制可配置的转盘抽奖
使用https://github.com/givebest/GB-canvas-turntable代码移植过而来. 其它微信小程序感觉是个半成品,代码移植过程比较繁琐麻烦.canvas API 部分 ...
小程序中使用canvas绘制海报
最近项目需求使用canvas绘制朋友圈可分享的海报,中间遇到很多问题,于是上网搜索,完美解决后,在此总结一下. 先来看一下效果图,点击按钮生成带二维码的图片. 1.关于canvas画布的宽度和高度 w ...
微信小程序开发—(八)canvas绘制图形
一.小知识 (1).API接口 (2).context 对象的方法列表二.步骤 wxml中: <canvas canvas-id="myCanvas" class=&quo ...
小程序水印照片canvas绘制网络图和本地图加载空白的解决方案
功德+1 功德+1 功德+1 效果图遇到问题在图片onload中,绘制水印,水印含网络图logo和本地图的图片.在使用**wx.canvasToTempFilePath()**生成图片时,logo ...
微信小程序：wx-charts动态绘制折线图
微信小程序:wx-charts动态绘制折线图 wx-charts是基于 Canvas的微信小程序主流图表工具,体积小易操作,支持多种图表的绘制,这里主要就动态绘制折线图做出详解,所谓动态,指的是表格的 ...
小程序之保存canvas生成商品图片附加小程序二维码分享到朋友圈
小程序之保存canvas生成商品图片附加小程序二维码分享到朋友圈一.概述需要用到的生成二维码组件(可自行下载添加到小程序根目录utils里):https://github.com/demi52 ...

小程序 mpvue 使用canvas绘制环形图表

小程序 mpvue 使用canvas绘制环形图表相关推荐

最新文章

热门文章