canvas画饼图
<style>
body {
? ? background: black;
? ? text-align: center;
}
#cans {
? ? background: white;
}
</style>
<script>
function disToRad(n){//將度數表示弧度計算的方法
return n*Math.PI/180;//π用PI表示，π=180°，所以1°=PI/180
}
window.οnlοad=function(){
? ? let cans=document.getElementById("cans");//獲取畫布
? ? let ctx=cans.getContext("2d");//創建畫板
? ? let cx=300;//設置x軸初始位置坐標(即圓的中心坐標)
? ? let cy=200;//設置y軸初始位置坐標(即圓的中心坐標)
? ? let r=150;//半徑
? ? function pie(startAng,endAng,color){//創建一個畫扇形的方法
? ? ? ? ?let nx,ny;//x軸初始位置坐標
? ? ? ? ?ctx.beginPath();//防止之前畫好的部分受后面畫的影響
? ? ? ? ?ctx.moveTo(cx,cy);//畫筆開始坐標(即圓的中心坐標)
? ? ? ? ?nx=cx Math.sin(disToRad(startAng))*r;//弧線初始點的x軸坐標
? ? ? ? ?ny=cy-Math.cos(disToRad(startAng))*r;
? ? ? ? ?ctx.lineTo(nx,ny);//設置終點坐標（弧線初始點坐標）
? ? ? ? ?ctx.arc(cx,cy,r,disToRad(startAng-90),disToRad(endAng-90),false);//畫扇形，弧度=度數-90
? ? ? ? ?ctx.closePath();//圖形閉合
? ? ? ? ?ctx.stroke();//描邊
? ? ? ? ?ctx.fillStyle=color;//設置填充顏色
? ? ? ? ? ctx.fill();//填充
? ? }
? ? var data=[10,30,35,20,5];//表示度數的數組
? ? let color=['red','green','yellow','blue','orange'];//表示顏色的數組
? ? let sum=data.reduce(function(prev,current){
? ? ? ? return prev current;//求總和
? ? ?})
? ? let avgDegree=data.map(function(item){
? ? ? ? return item/sum*360;//轉換為角度
? ? })
? ?lastDegree=0;//設置初始度數
? avgDegree.forEach(function(item,index){
? ? ? pie(lastDegree,lastDegree item,color[index]);//調用pie(),的分別循環換獲取startAng,endAng,color
? ? ? lastDegree =item;
? ?})
}
</script>
<body>
<canvas id="cans" height="800" width="1200">該瀏覽器不支持canvas元素操作,請更新瀏覽器</canvas>
</body>
效果如圖：
更多專業前端知識，請上 【猿2048】www.mk2048.com
總結
- 上一篇： 怎么隐藏滚动条又能滚动
- 下一篇： mat-form-field must