生活随笔
收集整理的这篇文章主要介绍了
小程序实现圆饼图
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
效果图
预备知识
CanvasContext.createCircularGradient(number x, number y, number r) Canvas的基本绘制API 实现代码
注意：arc()函数中表示角的单位是弧度，不是角度。角度与弧度的js表达式:
function drawPie
( canvas, anglesArray, circular, percent
) { //画出饼状图var ctx
= canvas
; //颜色列表const color
= [ { start:
'rgb(76, 197, 255)' , end:
'rgb(81, 122, 255)' } ,
{ start:
'rgb(38, 236, 161)' , end:
'rgb(12, 182, 224)' } ,
{ start:
'rgb(255, 115, 137)' , end:
'rgb(230, 75, 161)' } ] for ( let i
= 0
; i
< anglesArray.length
; i++
) { let startAngle
; let endAngle
; if ( i
== 0
) { startAngle
= transformAngle
( 0
) ; endAngle
= transformAngle
( anglesArray
[ i
] - 1
) ; } else { let start
= 0
; for ( let j
= 0
; j
< i
; j++
) { start +
= anglesArray
[ j
] ; } startAngle
= transformAngle
( start
) ; endAngle
= transformAngle
( start + anglesArray
[ i
] - 1
) ; } ctx.beginPath
( ) ; ctx.arc
( circular.x, circular.y, circular.radius, startAngle, endAngle
) ; ctx.lineTo
( circular.x, circular.y
) ; ctx.closePath
( ) ; //填充渐变色
let gra
= ctx.createCircularGradient
( circular.x, circular.y, circular.radius
) ; gra.addColorStop
( 0, color
[ i
] .start
) gra.addColorStop
( 1, color
[ i
] .end
) ; ctx.setFillStyle
( gra
) ctx.fill
( ) ; } //绘制中间的空白圆ctx.beginPath
( ) ; ctx.arc
( circular.x, circular.y, circular.radius * percent, 0, 360
) ; ctx.fillStyle
= "white" ; ctx.fill
( ) ; ctx.draw
( ) ;
}
function transformAngle
( angle
) { //计算弧度
return ( Math.PI / 180
) * angle
}
总结
以上是生活随笔 为你收集整理的小程序实现圆饼图 的全部内容，希望文章能够帮你解决所遇到的问题。
如果觉得生活随笔 网站内容还不错，欢迎将生活随笔 推荐给好友。
