canvas 实现环形进度条
H5 PC
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <canvas id="canvas" height="100" width="100"></canvas> <script> //获取画布 var canvas =document.querySelector('#canvas'); canvas.style.border="1px solid black"; //获取画笔 var ctx=canvas.getContext('2d'); //画出圆环 //画出进度条 function fillProcess(numDeg=10){ //开启路径 ctx.beginPath(); ctx.lineWidth=8; ctx.arc(50,50,50,Math.PI*1.5,Math.PI*1.5+Math.PI*numDeg/100*2,false); ctx.lineCap="round"; ctx.strokeStyle="#008000"; ctx.stroke(); //关闭路径 ctx.closePath(); //画出填充背景 ctx.beginPath(); ctx.arc(50,50,44,Math.PI*2,false) ctx.fillStyle="#ccc"; ctx.fill() ctx.closePath(); //填充文字 ctx.beginPath(); ctx.font="14px math"; ctx.fillStyle="blue"; ctx.fillText((numDeg+'%'),45,55,40) ctx.closePath(); } fillProcess(80) </script> </body> </html>
微信小程序
wxml
<canvas type="2d" id="myCanvas" width="100%" height="100%"></canvas>
wx.js
// pages/version3/addStudent/index.js Page({ /** * 页面的初始数据 */ data: { canvasDom: null, // 画布dom对象 canvas:null, // 画布的节点 ctx: null, // 画布的上下文 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, //表单提交 submitForm:function(e){ console.log(e.detail.value) }, //查询节点信息，并准备绘制图像 drawImage(){ const query=wx.createSelectorQuery(); query.select('#myCanvas') .fields({ node:true, size:true }).exec((res)=>{ const dom=res[0]; const canvas=dom.node; const ctx=canvas.getContext('2d'); const dpr=wx.getSystemInfoSync().pixelRatio; this.setData({ canvasDom: dom, // 把canvas的dom对象放到全局 canvas: canvas, // 把canvas的节点放到全局 ctx: ctx, // 把canvas 2d的上下文放到全局 },function(){ this.drawing() // 开始绘图 }) }) }, drawing:function(deg=100){ //绘制外圈画面 console.log(this.data.ctx); this.data.ctx.beginPath(); this.data.ctx.strokeStyle="#ccc"; this.data.ctx.lineWidth=2.5; // this.data.ctx.arc(100,100,25,Math.PI*1.5,Math.PI*1.5+Math.PI*2*deg/100,false); this.data.ctx.arc(100,100,15.5,Math.PI*1.5,Math.PI*1.5+Math.PI*2,false); this.data.ctx.stroke(); this.data.ctx.closePath(); //绘制画面 console.log(this.data.ctx); this.data.ctx.beginPath(); this.data.ctx.strokeStyle="green"; this.data.ctx.lineWidth=2.5; this.data.ctx.arc(100,100,15.5,Math.PI*1.5,Math.PI*1.5+Math.PI*2*deg/100,false); // this.data.ctx.arc(100,100,31,Math.PI*1.5,Math.PI*1.5+Math.PI*2,false); this.data.ctx.stroke(); this.data.ctx.closePath(); //绘制文本 this.data.ctx.beginPath(); this.data.ctx.font = "18rpx Math"; this.data.ctx.fillStyle="black"; this.data.ctx.fillText((deg+'%'),85,105,60) this.data.ctx.closePath(); }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { this.drawImage() }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })
WX 小程序组件 环形进度条
wxml
<view class="garage-status"> <canvas type="2d" id="{{canvasId}}" class="canvas" style="width: {{customOptions.canvasSize.width}}rpx; height: {{customOptions.canvasSize.height}}rpx"></canvas> <view class="status-count">提交率</view> </view>
wxss
/* components/process/index.wxss */ .garage-status { position: relative; width: 90rpx; height: 120rpx; box-sizing: border-box; border: 1px solid orange; left: 100rpx; top: 100rpx; overflow:hidden; } .status-count { position: absolute; bottom:0; width: 90rpx; height: 42rpx; font-size: 30rpx; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #999999; line-height: 42rpx; } .canvas { margin-left: 10rpx; margin-top: 10rpx; }
wx.js
// components/process/index.js Component({ /** * 组件的属性列表 */ properties: { //进度条百分比 deg: { type: Number, value: 15, }, }, /** * 组件的初始数据 */ data: { canvasDom: null, // 画布dom对象 canvas: null, // 画布的节点 ctx: null, // 画布的上下文 canvasId: `mp_progress_${new Date().getTime()}`, customOptions: { canvasSize: { width: 600, height: 300, }, percent: 100, }, }, /** * 组件的方法列表 */ methods: { //查询节点信息，并准备绘制图像 drawImage() { const query = wx.createSelectorQuery().in(this); let id='#'+this.data.canvasId; query .select(id) .fields({ node: true, size: true, }) .exec((res) => { const dom = res[0]; const canvas = dom.node; const ctx = canvas.getContext("2d"); const dpr = wx.getSystemInfoSync().pixelRatio; this.setData( { canvasDom: dom, // 把canvas的dom对象放到全局 canvas: canvas, // 把canvas的节点放到全局 ctx: ctx, // 把canvas 2d的上下文放到全局 }, function () { this.drawing(this.data.deg); // 开始绘图 } ); }); }, drawing: function (deg = 100) { //绘制外圈画面 console.log(this.data.ctx); this.data.ctx.beginPath(); this.data.ctx.strokeStyle = "#ccc"; this.data.ctx.lineWidth = 2.5; // this.data.ctx.arc(100,100,25,Math.PI*1.5,Math.PI*1.5+Math.PI*2*deg/100,false); this.data.ctx.arc( 16, 16, 15.5, Math.PI * 1.5, Math.PI * 1.5 + Math.PI * 2, false ); this.data.ctx.stroke(); this.data.ctx.closePath(); //绘制画面 this.data.ctx.beginPath(); this.data.ctx.strokeStyle = "rgba(51, 147, 221, 1)"; this.data.ctx.lineWidth = 2.5; this.data.ctx.arc( 16, 16, 15.5, Math.PI * 1.5, Math.PI * 1.5 + (Math.PI * 2 * deg) / 100, false ); // this.data.ctx.arc(100,100,31,Math.PI*1.5,Math.PI*1.5+Math.PI*2,false); this.data.ctx.stroke(); this.data.ctx.closePath(); //绘制文本 this.data.ctx.beginPath(); this.data.ctx.font = "18rpx Math"; this.data.ctx.fillStyle = "black"; this.data.ctx.fillText(deg + "%", 6.5, 19.5, 60); this.data.ctx.closePath(); }, }, attached: function() { // 在组件实例进入页面节点树时执行 this.drawImage() }, });
WX
wx.ml
<view class="circle_box" style="width:{{size}}px;height:{{size}}px;position:relative">
<!-- <canvas class="circle_bg" canvas-id="{{draw}}bg" style="width:{{size}}px;height:{{size}}px;opacity:0;display:{{show}}"></canvas> -->
<canvas class="circle_draw" canvas-id="{{draw}}" style="width:{{size}}px;height:{{size}}px;opacity:0;display:{{show}}"></canvas>
<!-- <canvas class="circle_bg" canvas-id="{{draw}}bg" style="width:{{size}}px;height:{{size}}px;opaity:0"></canvas> -->
<!-- <image src="{{url}}" style="width:{{size}}px;height:{{size}}px;"></image> -->
<image src="{{url1}}" style="width:{{size}}px;height:{{size}}px;"></image>
<text class='circle_txt'> {{txt}}<text>%</text> </text>
<text class="true">提交率</text>
</view>
wx.ss
.circle_box, .circle_draw { position: relative; } .circle_bg { position: absolute; left: 0; top: 0; } .circle_box { display: flex; /* flex-direction: row; */ justify-content: center; flex-wrap: wrap; /* align-items: center; */ background: url(data:image/png;base64,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) no-repeat 0 0/ 100%; width: 90rpx; height: 120rpx; } .circle_box image { position: absolute; left: 0; top: 0; } .circle_txt { position: absolute; top: 20rpx; text-align: center; flex: 1; height: 25rpx; font-size: 18rpx; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #000000; line-height: 25rpx; } .circle_txt text { font-size: 20rpx; } .true { top: 75rpx; position: absolute; width: 90rpx !important; line-height: 25rpx; font-size: 30rpx; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #999999; line-height: 42rpx; }
wx,js
// component/pro/index.js Component({ /** * 组件的属性列表 */ options: { multipleSlots: true, // 在组件定义时的选项中启用多slot支持 }, properties: { per: { //百分比 通过此值转换成step type: String, value: "0", }, r: { //半径 type: String, value: "50", }, }, data: { /* 私有数据，可用于模版渲染 */ step: 1, //用来算圆的弧度0-2 size: 0, //画板大小 screenWidth: 750, //实际设备的宽度 txt: 0, show: "block", url: "http://tmp/wx2df78d360c5a8eb8.o6zAJs9cZQ_86upd1kTYsqHHzeyM.aQs4376TV8Wpafb6b2f30c54e908fc2ee0b0218bbd04.png", url1: "", draw: `mp_progress_${new Date().getTime()}`, }, methods: { /** * el:画圆的元素 * r:圆的半径 * w:圆的宽度 * 功能:画背景 */ // drawCircleBg: function (el, r, w) { // // debugger // const ctx = wx.createCanvasContext(el,this); // ctx.setLineWidth(w);// 设置圆环的宽度 // // debugger // ctx.setStrokeStyle('rgba(216,216,216,.2)'); // 设置圆环的颜色 // ctx.setLineCap('round') // 设置圆环端点的形状 // ctx.beginPath();//开始一个新的路径 // ctx.arc(r, r, r - w, 0, 2 * Math.PI, true); // //设置一个原点(110,110)，半径为100的圆的路径到当前路径 // ctx.stroke();//对当前路径进行描边 // ctx.draw(); // }, /** * el:画圆的元素 * r:圆的半径 * w:圆的宽度 * step:圆的弧度 (0-2) * 功能:彩色圆环 */ drawCircle: function (el, r, w, step, ni) { var context = wx.createCanvasContext(el, this); // 设置渐变 var gradient = context.createLinearGradient(2 * r, r, 0); gradient.addColorStop("0", "#3393DD"); gradient.addColorStop("0.5", "#3393DD"); gradient.addColorStop("1.0", "#3393DD"); context.setLineWidth(w); context.setStrokeStyle(gradient); context.setLineCap("round"); // debugger context.beginPath(); //开始一个新的路径 // step 从0到2为一周 context.arc( r, r, r - w, -Math.PI / 2, step * Math.PI - Math.PI / 2, false ); context.stroke(); //对当前路径进行描边 context.draw(); }, }, lifetimes: { // 生命周期函数，可以为函数，或一个在methods段中定义的方法名 attached: function () { const _this = this; //获取屏幕宽度 wx.getSystemInfo({ success: function (res) { _this.setData({ screenWidth: res.windowWidth, }); }, }); //初始化 const el = _this.data.draw; //画板元素 const per = _this.data.per; //圆形进度 const r = Number(_this.data.r); //圆形半径 _this.setData({ step: (2 * Number(_this.data.per)) / 100, txt: _this.data.per, }); //获取屏幕宽度(并把真正的半径px转成rpx) let rpx = (_this.data.screenWidth / 750) * r; //计算出画板大小 this.setData({ size: rpx * 2, }); const w = 2; //圆形的宽度 //组件入口,调用下面即可绘制 背景圆环和彩色圆环。 // _this.drawCircleBg(el + 'bg', rpx, w);//绘制 背景圆环 // setTimeout(function(){ // wx.canvasToTempFilePath({ // x: 0, // y: 0, // width: _this.data.size * 2, // height: _this.data.size * 2, // destWidth: _this.data.size * 2, // destHeight: _this.data.size * 2, // canvasId: _this.data.draw + 'bg', // success: function (res) { // _this.setData({ // url: res.tempFilePath // }); // console.log(res.tempFilePath) // }, // fail: function (res) { // console.log(res) // } // }, _this) // },500) _this.drawCircle(el, rpx, w, _this.data.step, true); //绘制 彩色圆环 // debugger setTimeout(function () { wx.canvasToTempFilePath( { x: 0, y: 0, width: _this.data.size * 2, height: _this.data.size * 2, destWidth: _this.data.size * 2, destHeight: _this.data.size * 2, canvasId: _this.data.draw, success: function (res) { _this.setData({ url1: res.tempFilePath, show: "none", }); console.log(res.tempFilePath); }, fail: function (res) { console.log(res); _this.drawCircle(el, rpx, w, _this.data.step, true); //绘制 彩色圆环 setTimeout(function () { wx.canvasToTempFilePath( { x: 0, y: 0, width: _this.data.size * 2, height: _this.data.size * 2, destWidth: _this.data.size * 2, destHeight: _this.data.size * 2, canvasId: _this.data.draw, success: function (res) { _this.setData({ url1: res.tempFilePath, show: "none", }); console.log(res.tempFilePath); }, fail: function (res) { console.log(res); }, }, _this ); }, 500); }, }, _this ); }, 1000); }, }, });
