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

最新推荐文章于 2025-09-12 14:04:02 发布

weixin_30817749

最新推荐文章于 2025-09-12 14:04:02 发布

阅读量69

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/suway/p/7231018.html

本文介绍了一种使用HTML5 Canvas和JavaScript绘制圆形和折线的方法。通过设置不同大小的圆及特定的折线，展示了如何在网页上进行基本图形绘制。文章包括完整的JavaScript代码示例。

<!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>