本文为大家分享了帆布实现适用于移动端的百分比仪表盘，供大家参考，具体内容如下

由于最近工作中，经常会遇到一些动态百分比的仪表盘，一开始都是用图片样式方式实现；

但是随着越来越多的项目，决定用帆布绘制一个简易的仪表盘，便于以后项目中直接使用；

现版本只是书写为方法形式，也许之后会有时间对其优化为插件形式。

简简单单而已，以下直接给出代码和执行过程中的三张截图：

！doctype html html lang=' en ' head meta charset=' utf-8 ' meta http-equiv=' Pragma ' content=' no-cache ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0，user-scalable=no '/meta name=' format-detection ' content=' phone=no '/meta name=' apple-mobile-web-app-style ' content=' yes '/meta name=' apple-mobile-web-app-status-bar-style '绘制简易百分比仪表盘仪表板（建议最好用于移动端)/title style type=' text/CSS ' div { margin 33601 rem；背景技术# eeepadding : 3 empposition : relative } div canvas { background : # cacaca；-web套件-transform : Rotatez(-270)；transform : rotatez(-270)；-网络套件-动画： ani 01 1s ease 0s两者；动画：ani01 1s ease 0s两者；} @-网络工具包-关键帧ani01 { 0% {-web kit-transform : scale(。5,5)Rotatez(-270)；transform:scale(.5，5)Rotatez(-270)；} 100% {-web kit-transform : scale(1，1)Rotatez(-90)；transform:scale(1，1)Rotatez(-90)；} } @关键帧ani01 { 0% {-WebKit-transform : scale(。5,5)Rotatez(-270)；transform:scale(.5，5)Rotatez(-270)；} 100% {-web kit-transform : scale(1，1)Rotatez(-90)；transform:scale(1，1)Rotatez(-90)；} }/style/head body div canvas id=' my canvas 1 ' data-percent=' 80 '您的浏览器不支持帆布标签/canvas span style=' display : block；位置：绝对；top:94remleft:3rem宽度：2毫米；文本对齐：居中；font-size :5 remfont-family : Microsoft Yahei ' id=' dushu ' 0/span/div脚本类型=' text/JavaScript ' src=' http :/js/灵活。js '/script脚本类型=' text/JavaScript ' var pper=0；var pper _ inter lvar dushu=document。getelementbyid(' dushu ')；var AAA=drawinvanpercent(' my canvas 1 '，' rem '，2 '，#0e9cfa '，0.2 '，# fff ')；函数drawin percent(ele _ id，dw，cir_r，cir_color，line_w，fill _ color){ if(dw==' rem '){ cir _ r=cir _ r *(window。屏幕。宽度/10)；line _ w=line _ w *(窗口。屏幕。宽度/10)；} var canvas=文档。getelementbyid(ele _ id)；var circle={ r : cir_r/2，//圆的半径per : canvas.getAttribute('数据百分比'),//百分比分子color : cir_color，//圆的颜色线宽：线_w //圆的颜色};帆布。宽度=画布。高度=圆形。r * 2；帆布。风格。borderradius=' 50% '；if(画布。CTX 2=画布。get context(' 2d ')；ctx2.fillStyle=fill _ color圆形，圆形，circle.r-circle.lineWidth/2，0，数学* 2，假);CTX 2。fill()；var CTX=画布。get context(' 2d ')；pper _ interal=setInterval(function(){ draw move(CTX，圆))；}, 10);} }函数drawMove(ctx，circle){ if(pper=circle)。per){ pper=圆形。per清除超时(pper _ interal)；} else { pper} dushu。innertext=pper " %CTX。begin path()；CTX。strokestyle=圆形。颜色；CTX。线宽=圆。线宽；ctx.arc(圆形. r，圆形. r，圆形. r，0，Math .PI*(pper/100)*360/180，假);CTX。笔画()；}/脚本/正文/html截图如下：

建议：不要因为简单就停止做事。多做事，多思考，你就会进步。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。