使用canvas画一个雷达效果图的特效代码 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>circle</title>
</head>
<script type="text/javascript">
 // javapig draw circle
 
 function pig(id) {
  var canvas = document.getElementById(id);
  if(canvas.getContext){  
   var ctx = canvas.getContext("2d");  
   ctx.strokeStyle = "#FFCCCC";
   var circle = {
    x : 200,     
    y : 200,     
    r : 20      //最小圆的半径
   };
   // 画5个圆圈
   ctx.beginPath();
   ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2, true);    
   ctx.stroke();
   
   ctx.beginPath();
   ctx.arc(circle.x, circle.y, circle.r+20, 0, Math.PI * 2, true); 
   ctx.stroke();
   
   ctx.beginPath();
   ctx.arc(circle.x, circle.y, circle.r+40, 0, Math.PI * 2, true); 
   ctx.stroke();
   
   ctx.beginPath();
   ctx.arc(circle.x, circle.y, circle.r+60, 0, Math.PI * 2, true); 
   ctx.stroke();
   
   ctx.beginPath();
   ctx.arc(circle.x, circle.y, circle.r+80, 0, Math.PI * 2, true); 
   ctx.stroke();
   
   // 画十字线
   var bp = 200 - Math.sqrt( 100*100/2 );
   ctx.beginPath();
      ctx.moveTo(bp,bp);
   var ep = 200 + Math.sqrt( 100*100/2 );
   ctx.lineTo(ep,ep);
   ctx.stroke();
   ctx.beginPath();
      ctx.moveTo(bp,ep);
   ctx.lineTo(ep,bp);
   ctx.stroke();
   
   // 画折线 四项分数分别为 100、 90 、75 、95
   
   ctx.strokeStyle = "rgb(250,0,0)";
   bp = 200 - Math.sqrt( 100*100/2 );
   ctx.beginPath();
      ctx.moveTo(bp,bp);
   bp = 200 -  Math.sqrt( 80*80/2 );
   ep = 200 +  Math.sqrt( 80*80/2 );
   ctx.lineTo(bp,ep);
   
   bp = 200 +  Math.sqrt( 75*75/2 );
   ep = 200 +  Math.sqrt( 75*75/2 );
   ctx.lineTo(bp,ep);
   bp = 200 +  Math.sqrt( 75*75/2 );
   ep = 200 +  Math.sqrt( 75*75/2 );
   ctx.lineTo(bp,ep);
   bp = 200 +  Math.sqrt( 95*75/2 );
   ep = 200 -  Math.sqrt( 95*75/2 );
   ctx.lineTo(bp,ep);
   ctx.closePath();
  
   ctx.stroke();
   
  }
 }


</script>
<body bgcolor="" onLoad="pig('y')">
 <canvas style="background:#FFC" height="400" width="400" id="y"></canvas>

</body>
</html>

 

posted @ 2017-07-24 20:52  sandywei  阅读(878)  评论(0)    收藏  举报