1.实现圆环绘制// fragmentshader void main() { float radius = 0.5; vec2 st = gl_PointCoord.xy; float dist = distance(st,vec2(0.5,0.5)); float alpha = smoothstep(radius-0.12,radius,dist) - smoothstep(radius-0.1,radius,dist); gl_FragColor = vec4( 1.0,0.0,0.0, alpha); }2.让圆环存在一个1/4的缺口(具体大小可以自己调整)// fragmentshader #define PI 3.14159265359 void main() { float radius = 0.5; vec2 st = gl_PointCoord.xy; float dist = distance(st,vec2(0.5,0.5)); float alpha = smoothstep(radius-0.12,radius,dist) - smoothstep(radius-0.1,radius,dist); float theta = mod( atan(st.y - 0.5,st.x - 0.5) + PI , PI*2.0); float a = step( PI/2.0, theta ); gl_FragColor = vec4( 1.0,0.0,0.0, alpha*a); }完整html的demo: Document