参考网上的一个案例，“参考是画一个动态的圆”，现在我的需求是把它改编成四分之三的圆

达到效果：

该样式显示了画布绘制的基本操作设置

参考源代码链接：原文：https://www.jb51.net/html5/682215.html

修改上面引用的源代码，注意几点

1.了解画圆环的原理，这是基于弧度的。2.弧度的计算公式。3.将每个角度转换成弧度。4.起点和终点坐标

画一张图便于理解！

首先，你可以根据图看到起点和关键点。看坐标就知道起点是-240度。这种积极和消极仍有待区分。各弧度的计算公式、

将角度转换为弧度：

var弧度=度*(数学)。PI/180)；

这样，它就可以被修改

修订后的法典

` draw main (drawing _ elem，percent，forecolor，bgcolor，fill color){/* @ drawing _ elem 3360 drawing object @ percent:绘制环的百分比，范围[0，100] @ forecolor3360绘制环的前景色。颜色代码@bgcolor:绘制戒指的背景颜色，颜色代码*/varcontext=drawing _ elem . getcontext(' 2d ')varcenter _ x=drawing _ elem.width/2; var center _ y=drawing _ elem . height/2；var rad=Math.PI/3*5/100;//画一个300度的圆//65 * math.pi/180,115 * math.pi/180//varspeed=0；//绘制背景圆函数background circle(){ context . save()；context . BeginPath()；context . line width=8；//设置线宽varradius=center _ x-context . line width；context.lineCap=' roundcontext.strokeStyle=bgcolorcontext.arc(center_x，center_y，半径，-Math。PI/180*240，Math.PI/180*60,假)；* *起点、终点、半径、起点和终点，是否顺时针/逆时针* * context . stroke()；context . closepath()；context . restore()；}//绘制运动圆函数前景圆(n){ context . save()；context.strokeStyle=forecolorcontext . line width=8；context.lineCap=' roundvar radius=center _ x-context . line width；//console . log(Endangle)context . BeginPath()；context.arc(center_x，center_y，半径，-Math。PI/180*240，-数学。PI/180*240 n*rad，假)；//用于绘制圆弧context.arc(x坐标、y坐标、半径、起始角度、终止角度、顺时针/逆时针)context . stroke()；context . closepath()；context . restore()；}//绘制文本函数text(n){ context . save()；//保存和恢复可以保证样式属性只应用于这个画布元素上下文，context.fillStyle=fillColorvar font _ size=20context . font=font _ size ' px Helvetica '；var text _ width=context . measure text(n . tofixed(0)' % ')。宽度；context . filltext(n . tofixed(0)' % '，center_x-text_width/2，center _ y font _ size/2)；context . restore()；}//执行动画(函数drawFrame(){//移除动画加载效果//window . request animation frame(draw frame)；//context.clearRect(0，0，drawing_elem.width，drawing _ elem . height)；background circle()；文本(百分比)；foregroundCircle(百分比)；* *//动画加载效果被移除。对于这两行代码，* * *//if(speed=percent)返回被删除，因为加载速度慢，动态效果太慢。//速度=1；}());}，下一步就是调用这个方法。当它被调用时，它被放入nextTick。当时遇到的问题是只能加载第一个，不能加载下一个。我感觉到了装载顺序的问题，它是绘制的，但没有渲染。

这个。$ NextTick(()={ for(var I=0；this . couponceinterlist . length；I){ this . children tag=document . getelementbyid(' time-graph-canvas ' I)；让分数=this . couponceinterlist[I]。couponPercentage * 100this . drawinmain(this . children tag，score，' #fff '，' rgba(255，255，255，0.4)'，' # fff ')；* *得分变量是我从界面取出的数据保存在得分变量中的汇总* *}})

以上是边肖介绍的vue动态绘制3/4圆图的效果，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！