用canvas畫雷達圖

最近要做一個雷達圖，網路上找jQuery的外掛都找不大到，索性自己來寫一個，發現也還蠻簡單的。

這次用canvas來畫的，所以先定義canvas

view plaincopy to clipboardprint?

1. var canvas = document.getElementById("canvas");     
2. var ctx = canvas.getContext("2d");       
3. ctx.fillStyle = "rgba(255, 0, 0, 0.5)";     
4. ctx.strokeStyle = "rgba(204, 0, 0, 1)";     
5. ctx.lineWidth= 1;   

然後用三角函數算出每個點的位置。

view plaincopy to clipboardprint?

1. x1=Math.cos(Math.PI/180*30)*n1;   
2. y1=Math.sin(Math.PI/180*30)*n1;  

最後把線畫出來就完成了。

view plaincopy to clipboardprint?

1. ctx.beginPath();     
2. ctx.moveTo(x1, y1);     
3. ctx.lineTo(x2, y2);   
4. ctx.lineTo(x3, y3);   
5. ctx.lineTo(x4, y4);   
6. ctx.lineTo(x5, y5);   
7. ctx.lineTo(x6, y6);   
8. ctx.lineTo(x1, y1);     
9. ctx.fill();     
10. ctx.stroke();