17顶

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

稿源：互联网 2018-09-02 22:35:03 点击： 12291 撤稿纠错

画出一个逼真的雷达图，canvas特效实例

以下讨论的是和canvas 雷达相关的使用canvas画一个雷达效果图的特效代码教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

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

关于使用canvas画一个雷达效果图的特效代码的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018090294466.shtml方便下次再访问哦。

·上一篇： 用js实现给网页上每日自动更新换一张图片展示特效
·下一篇： 非常酷的左右无间隙文字切换选项卡特效代码

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

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

文章分类LIST >>返回首页

最新游戏

最新新闻