用canvas畫雷達圖

canvas radar

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

這次用canvas來畫的,所以先定義canvas
  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;   

然後用三角函數算出每個點的位置。
  1. x1=Math.cos(Math.PI/180*30)*n1;   
  2. y1=Math.sin(Math.PI/180*30)*n1;  

最後把線畫出來就完成了。
  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();  

留言

熱門文章