用三角函數(shù)sin和cos畫模擬雷達示意圖的html代碼解析

.說明：

1.1 推薦指數(shù)：★★★★

1.2 環(huán)境：谷歌瀏覽器、微軟vscode編輯器

1.3 熟悉sin和cos的函數(shù)與圓（畫圓弧的關系）深入理解

比較真實的雷達界面掃描圖

2.本次的模擬效果圖：

3.css和js文件的引入：

3.1 同一個文件夾或者目錄下引入：./xxx.js或者./xxx.css

3.2 大型的html文件或者一般在html文件的同一個目錄下，建css文件夾和js文件夾，放入相應文件夾下，那么導入就是：css/xxx.css和js/xxxx.js

3.3 外部引入法：找到網(wǎng)址：比如：網(wǎng)址在代碼注釋里query-3.4.1.min.js，引入即可。

但是如果沒有網(wǎng)絡，那么html文件就不可用了，怎么辦呢？有辦法。

用瀏覽器打開，復制：網(wǎng)址在代碼注釋里jquery-3.4.1.min.js，打開。

全選復制（ctrl+a），在本地文件夾新建一個js文件：jquery-3.4.1.min.js，將復制的內(nèi)容，黏貼進入，保存即可。向上面的js文件和css文件一樣，作為本地js文件引入。

4.本次html文件代碼：index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas帶坐標雷達掃描特效</title>
<!--在線引入地址：https://code.jquery.com/jquery-3.4.1.min.js-->
<!--script-- src="./jquery.min.js"></!--script-->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!--將style作為單獨css文件，引入，否認就是style和/style的標簽內(nèi)-->
<!--采用下面格式：link法-->
<link type="text/css" href="./style.css" rel="stylesheet" />
</head>
<body>

<canvas id="myCanvas"></canvas>
<div class="info">
  <!--顯示文字段落-->
  <h1>Warning??！Enemy is coming?。?lt;/h1>
  <!--初始化cs-xo，之后就是message彈出動態(tài)數(shù)據(jù)-->
  <p class="message">cs-xo</p>
</div>
<!--將radar.js作為單獨js文件，引入，否認就是script和/script的標簽內(nèi)-->
<script src="./radar.js"></script>
</body>
</html>

注意：外部引入和本地引入基本沒什么區(qū)別，如果css和js=JavaScript寫在html內(nèi)，可能有不同，上面注釋里有提到。

5.jquery-3.4.1.min.js代碼不寫了，可以自己去下載，免費的，或者上面的有講解如何操作，此處略。

6.新建一個radar.js文件，代碼如下：

var c = $("#myCanvas")[0];
var ctx = c.getContext("2d");
/*雷達界面顏色=草地綠色*/
var color_gold="124,252,0"
var ww,wh;
var center={x: 0,y: 0};
// 定義函數(shù)
function getWindowSize(){
  ww=$(window).outerWidth();
  wh=$(window).outerHeight();
  c.width=ww;
  c.height=wh;
  // 中心坐標是窗口的一半
  center={x: ww/2,y: wh/2};
  ctx.restore();
  ctx.translate(center.x,center.y);
}
// 啟動函數(shù)
getWindowSize();
$(window).resize(getWindowSize);
// 10=敵機數(shù)量，隨機出現(xiàn)
var enemies=Array(10).fill({}).map(
  function(obj){
    return {
      r: Math.random()*200,
      deg: Math.random()*360,
      opacity: 0
    } 
  }
);
setInterval(draw,10);
var time=0;
var deg_to_pi=Math.PI/180;
// 畫圓的函數(shù)，三角函數(shù)sin和cos畫圓法
function Point(r,deg){
  return {
    x: r*Math.cos(deg_to_pi*deg),
    y: r*Math.sin(deg_to_pi*deg),
  };
}
/*定義顏色函數(shù)*/
function Color(op){
  return "rgba("+color_gold+","+op+")";
}
function draw(){
  time+=1;
  /*畫長方形的背景顏色填充 "#111"=黑色;*/
  ctx.fillStyle = "#111";
  ctx.beginPath();
  /*畫長方形*/
  ctx.rect(-2000,-2000,4000,4000);
  ctx.fill();
  /*十字垂直水平坐標線，0.1~1代表粗細*/ 
  ctx.strokeStyle="rgba(255,125,64,0.5)";
  // ctx.strokeStyle="255,125,64";// 默認粗細值為1
  ctx.moveTo(-ww/2,0);
  ctx.lineTo(ww/2,0);
  ctx.moveTo(0,-wh/2);
  ctx.lineTo(0,wh/2);
  ctx.stroke();
  // 雷達掃面綠色和半徑大小
  ctx.strokeStyle=Color(1);
  var r=300;
  var deg=time;
  var newpoint=Point(r,deg);
  var line_deg = (time/2) % 360;
  // 雷達動態(tài)轉(zhuǎn)動的掃描扇形的弧度為100，最大360
  var line_deg_len=100;
  for(var i=0;i<line_deg_len;i++){
    var deg1 = (line_deg-i-1) ;
    var deg2 = (line_deg-i) ;
    var point1=Point(r,deg1);
    var point2=Point(r,deg2);
    // 代表隨著雷達掃描扇形的移動，顏色逐漸變淡
    var opacity=1-(i/line_deg_len)-0.3;
    if (i==0) opacity=1;
    ctx.beginPath();
    // 雷達扇形綠色動態(tài)漸變淡色
    ctx.fillStyle=Color(opacity);
    ctx.moveTo(0,0);
    ctx.lineTo(point1.x,point1.y);
    ctx.lineTo(point2.x,point2.y);
    ctx.fill();
  }
  enemies.forEach(function(obj){
    // 敵機出現(xiàn)的原點
    ctx.fillStyle=Color(obj.opacity);
    var obj_point=Point(obj.r,obj.deg);
    ctx.beginPath();
    ctx.arc(
      obj_point.x,obj_point.y,
      // 綠色敵機出現(xiàn)的小圓點4是半徑
      4,0,2*Math.PI
    );
    ctx.fill();
    ctx.strokeStyle= Color(obj.opacity);
    /*如果這樣直接設置，ctx.strokeStyle= '#FF4500，那么敵機就是一直出現(xiàn)在屏幕';*/
    var x_size=6;
    /* 雷達顯示敵機目標大小設置*/
    ctx.lineWidth=4;
    ctx.beginPath();
    ctx.moveTo(obj_point.x-x_size,obj_point.y+x_size);
    ctx.lineTo(obj_point.x+x_size,obj_point.y-x_size);
    ctx.moveTo(obj_point.x+x_size,obj_point.y+x_size);
    ctx.lineTo(obj_point.x-x_size,obj_point.y-x_size);
    ctx.stroke();
    if (Math.abs(obj.deg - line_deg)<=1){
      obj.opacity=1;
      // 顯示左上角偵查到的地理坐標
      $(".message").text("Detected: "+ obj.r.toFixed(3) + " at " +obj.deg.toFixed(3));
    }
    obj.opacity*=0.99;
    // 顯示敵機出現(xiàn)的漣漪圈的顏色
    ctx.strokeStyle= Color(obj.opacity);
    /*目標敵機顯示后的圓圈漣漪粗細設置*/
    ctx.lineWidth=1;
    ctx.beginPath();
    ctx.arc(
      obj_point.x,obj_point.y,
      10*(1/(obj.opacity+0.0001)),0,2*Math.PI
    );
    ctx.stroke();
  });
  // 雷達虛點固定圓盤的顏色，半徑等設置
  ctx.strokeStyle='yellow';
  var split =120;
  var feature =15;   // 15個小格
  var start_r=230; // 半徑
  var len = 5;
  for(var i=0;i<split;i++){
    ctx.beginPath();
    var deg = (i/120) * 360;
    if (i%feature==0){
      len=10;
      ctx.lineWidth=5;
    }else{
      len=5; 
      ctx.lineWidth=1;
    }
    var point1 =Point(start_r,deg);
    var point2 =Point(start_r+len,deg);
    ctx.moveTo(point1.x,point1.y);
    ctx.lineTo(point2.x,point2.y);
    ctx.stroke();
  }
  /*畫圈函數(shù)定義,下面三個畫圓函數(shù)的定義*/
  function CondCircle(r,lineWidth,func_cond){
    ctx.lineWidth=lineWidth;
    /* 顏色定義*/
    /*注意顏色定義：有引號的和沒有引號的區(qū)別，就是前面有沒有顏色圖標*/
    ctx.strokeStyle='#00C78C';
    ctx.beginPath();
    for(var i=0;i<=360;i++){
      var point =Point(r,i);
      if (func_cond(i)){
        ctx.lineTo(point.x,point.y);
      }else{
        ctx.moveTo(point.x,point.y);
      }
    }
    ctx.stroke();
  }
  // 雷達外圍的移動半弧形，300為半徑，2代表粗細
  CondCircle(300,2,function(deg){
    return ((deg+time/10)%180)<90;
  });
  // 雷達中間綠色的移動半弧形，160為半徑，2代表粗細
  CondCircle(160,2,function(deg){
    return ((deg+time/5)%180)<90;
  });
  // 雷達內(nèi)的小圓圈，綠色虛線圈，1代表粗細
  CondCircle(100,1,function(deg){
    // 如果這里沒有，那么顏色就是三條線函數(shù)里統(tǒng)一的顏色，也可以單獨設立
    ctx.strokeStyle='pink';
    return (deg%3)<1;
  });
  
}

7.新建一個style.css文件，代碼如下：

html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  /*隱藏瀏覽器的條形伸縮*/
  overflow: hidden;
}
/*定義畫布*/
canvas {
  -webkit-transform: scaleY(-1);
          transform: scaleY(-1);
}
/*顯示警告信息位置設置*/
.info {
  position: absolute;
  left: 10px;
  top: 10px;
}
h1 {
  /*顯示警告信息文字顏色設置*/
  color:red;
  letter-spacing: 0.5px;
  margin: 0;
  font-size:smaller;
}
.message {
  /*顯示雷達預警敵機的動態(tài)位置的文字顏色設置*/
  margin: 0;
  color:#00FFFF;
  font-size: x-large;
}

8.通過簡單的例子，熟悉html、css和js的關系和布局等基本知識，熟練掌握基本操作。

久沒參與魔方的發(fā)布工作了，今天提筆，有種莫名的生疏和惶恐，從下午四點半一直坐到現(xiàn)在，3個小時，刪刪寫寫。千言無語，千頭萬緒，千百般滋味涌上心頭，真的很懷念那些年每個周五定期一更的日子，簡單而快樂。

2006年12月Vista優(yōu)化大師發(fā)布第一個測試版，再到2009年9月發(fā)布魔方0.1，時光荏苒，便過去了9年。很多當初最早的那批朋友，現(xiàn)在都成了老友，有時候一覺醒來，發(fā)現(xiàn)軟媒的那個最老用戶群里的消息閃爍，由衷的開心，沒有什么比熟悉的感覺更有韻味。

產(chǎn)品部的魔方一哥過來催文了，盡管他說理解我的心情啊什么的，但是為了保持一貫的不加班作風，我得直入主題了——

魔方6.16正式版現(xiàn)在發(fā)布，“忍不住”還是讓產(chǎn)品組加了新功能，本來說好的要克制加新功能的沖動，重點大幅改進清理等原有常用功能的。

這次忍不住要加的新功能，大家在標題里面已經(jīng)看到了，就是一鍵提取微軟官方的精美聚焦壁紙（美化大師頂部加入了“聚焦壁紙”）。熟悉微軟的朋友都知道，Win10TH2開始系統(tǒng)增加了“Windows 聚焦”壁紙，大家在系統(tǒng)設置的“個性化”-“鎖屏設置”里面可以設置鎖屏的背景壁紙為“Windows 聚焦”，如下圖所示：

這些微軟官方提供的鎖屏壁紙還是非常精美的，會自動的下載并切換，于是魔方便加入了提取功能，需要注意的是，這兒的提取，是提取的本機已經(jīng)下載的，如果您之前沒有開啟過Windows聚焦功能，是抓不到的。這個抓取功能更方便的是讓大家隨時保存最新的。那過去的好看聚焦壁紙怎么辦？別著急，我們在軟件界面提供了所有Win10歷史聚焦壁紙下載大全的鏈接，很貼心的說。

當然，這次魔方還有其他的有愛更新，例如清理大師的重復文件查找支持了批量選擇和刪除操作，例如設置大師中加入了讓資源管理器關閉mkv文件的預覽以防止卡頓，軟媒雷達、軟媒時間、WiFi助手、軟媒壓縮等都有界面和功能修復改進。

具體更新內(nèi)容的細節(jié)，請看下面的更新歷史吧！

PS：按照慣例，軟媒魔方將在發(fā)布數(shù)十分鐘后才放開自動升級。

一、軟媒魔方更新歷史

軟媒魔方 6.1.6.0 正式版 - 2015年12月17日

魔方主程序 6.1.6.0：

新增：應用大全 - 增加旗魚瀏覽器PC版入口

軟媒美化大師 3.6.9.0：

新增：針對Win10 TH2增加Windows聚焦壁紙一鍵提取功能

軟媒時間 3.1.3.0：

修正：界面 - 多云和陰天的小圖標弄反的問題修正：界面 - 系統(tǒng)開啟高DPI的時候，窗口太小的問題

軟媒清理大師 3.7.3.0：

新增：隱私清理 - Office 2016打開歷史記錄清理

改進：重復文件查找 - 支持批量操作改進：注冊表清理 - 屏蔽注冊表清理功能

修正：隱私清理 - Office 2013打開歷史記錄清理不掉的問題

軟媒設置大師 3.6.8.0：

新增：資源管理器 - 關閉MKV視頻預覽

軟媒雷達 6.0.7.0：

修正：本機信息 - 讀取IE的Flash Player版本號錯誤的問題修正：界面 - 系統(tǒng)開啟高DPI的時候，窗口太小的問題

軟媒IE管理大師 1.9.8.0：

修正：界面 - 系統(tǒng)開啟高DPI的時候，窗口太小的問題

軟媒WiFi助手 1.1.8.0：

修正：穩(wěn)定性 - 啟動WiFi助手時可能發(fā)生的崩潰問題

軟媒壓縮 1.1.5.0：

修正：界面 - 系統(tǒng)開啟高DPI的時候，窗口太小的問題

二、為什么大家都在用魔方？

軟媒魔方好不好？軟媒魔方有什么用？為什么要用軟媒魔方？

先列出一些基本組件功能：

1、清理大師：一鍵清理、深度清理、注冊表清理、字體清理，還有隱私清理。。。難道你不需要？

2、美化大師：改系統(tǒng)字體、DIY win7開始按鈕、設置開機動畫、破解系統(tǒng)主題、修改系統(tǒng)聲音。。。怎么個性怎么玩，美化大師全搞定！

3、優(yōu)化大師：一鍵加速、添加、刪除系統(tǒng)啟動項，讓你輕松掌控系統(tǒng)進程的開啟！

4、軟媒時間，軟媒全球首創(chuàng)獨創(chuàng)的創(chuàng)意，任務欄時間區(qū)加入農(nóng)歷、天氣等顯示，不占任何額外空間，超NB！

5、軟媒桌面：哈，Windows系統(tǒng)里多了類似蘋果Mac OS X的快捷欄，方便大發(fā)了。

6、軟件管家：精選裝機必備軟件大全，下載杠杠的……

7、系統(tǒng)雷達：任務欄窗口+桌面懸浮窗自由隨意選擇，實時監(jiān)控網(wǎng)絡流量、CPU、內(nèi)存占用、磁盤讀寫，簡單、清晰、方便！

8、U盤啟動：一鍵制作U盤系統(tǒng)安裝盤，裝機還是PE維護簡直輕松到極點！

9、硬盤裝機：僅需兩步，輕松幫你重裝系統(tǒng)，win7、win8、win10，想裝什么裝什么，你肯定需要！

10、WiFi共享助手：超級簡單，打開軟件，一鍵開啟熱點，立馬擺脫手機流量不夠用的困擾?。∮H，你的流量還夠用嗎？

還有啥？上面列出的連一半功能都不到，還有網(wǎng)速測試、磁盤大師、文件校驗、文件解鎖、文件分割合并、文件粉碎……等等，還有好多功能，你能想到的基本都有！

軟媒魔方現(xiàn)在已經(jīng)有4000萬用戶下載使用，好用沒得說！

三、軟媒魔方軟件截圖

只需一鍵，智能模式讓你可以放心的把軟媒魔方介紹給你的老婆、小姨子和表妹……

右上角輕松切換到專業(yè)模式，熟悉中包含著科學改進后的經(jīng)典布局

軟媒時間，風云變幻-不占用任何額外空間，萬年歷天氣鬧鐘記事本在任務欄時間區(qū)完美呈現(xiàn)；

軟媒桌面，好玩好看-喜歡的鼠標拖進來，不愛的鼠標拖出去，桌面干凈整潔靈動驚艷；

軟媒雷達，實時偵探-把握您愛機的每一跳脈動，精確掌控系統(tǒng)軟硬件的占用資源；

軟件管家，純凈精干-編輯精選裝機必備的500款最常用軟件，一鍵安裝絕無插件；

四、軟媒魔方下載信息

初級用戶解惑：安裝包和綠色版有什么不同？安裝版下載后直接雙擊運行即可進入向?qū)О惭b，方便快捷。綠色版是ZIP壓縮格式，直接解壓到你指定的文件夾路徑下。

軟媒 - 存在，創(chuàng)造價值。

微信搜索“IT之家”關注搶6s大禮！下載IT之家客戶端（戳這里）也可參與評論抽樓層大獎！

達圖是什么呢？雷達圖又被稱為蜘蛛網(wǎng)圖，能夠顯示出多個維度的數(shù)據(jù)。以中心一點向各個數(shù)據(jù)方向外發(fā)射軸線，且每個數(shù)據(jù)點的夾角相等、刻度相同，連接每個變量的數(shù)據(jù)點后就會形成一條多邊形。
雷達圖適用于查看參數(shù)變量在某一范圍內(nèi)的變化，適用于顯示各性能之間的差異。
但雷達圖不能包含太多變量，產(chǎn)生的填充區(qū)域會變得混亂難以辯認。而且雖然仍有網(wǎng)格線標注大概數(shù)值但因為不夠精準，因此如果追求精準數(shù)值，則不建議使用雷達圖。

雷達圖常見用途

1、市場分析。如調(diào)查一個產(chǎn)品的受眾程度，可以以雷達圖的形勢呈現(xiàn)。能比較明晰產(chǎn)品上各要素的變化。
2、調(diào)查報告。對于調(diào)查一個熱門話題，從該話題的不同回答整合成一個大致范圍，即可繪成雷達圖。
3、因素分析。如分析一個人各方面的能力，空間力，想象力，記憶力，邏輯力等等。

雷達圖繪制方法

雷達圖的制作方法十分簡單，通過以下幾個步驟就可以輕松繪制出一幅專業(yè)實用的雷達圖。

第一步：點擊下載“億圖圖示"軟件或訪問在線版億圖圖示。啟動軟件，開始作圖！
第二步：新建雷達圖。依次點擊搜索“雷達圖”。然后從例子庫中，選擇一個模板，點擊打開雷達圖模板。

第三步：點擊畫布中的雷達圖，再點擊右側屬性面板中的“圖表”，最后點擊“數(shù)據(jù)”，通過修改表格中的數(shù)據(jù)，即可改變畫布中雷達圖的數(shù)據(jù)。當然，也可以直接導入excel或csv數(shù)據(jù)文件，可一鍵生成雷達圖。

第四步：雙擊文本框，替換雷達圖模板里的文字。

第五步：完成雷達圖的繪制后，可以點擊右上角的保存、下載、打印、分享等按鈕，對繪制好的雷達圖作品進行存儲。也可以將作品導出為圖片、PDF、PPT等格式。

雷達圖繪制軟件---億圖圖示

億圖圖示是一款專業(yè)的繪制圖形圖表的國產(chǎn)軟件，能夠給更多使用它的人尤其是商業(yè)人士帶來更有想法更有創(chuàng)造力的圖表，還能夠更多地節(jié)省時間增加輸出。它有豐富的模板和例子，能夠繪制諸如雷達圖、流程圖、組織結構圖、商務圖表等260余種圖表。支持Windows、Mac以及Linux系統(tǒng)的安裝使用，也支持網(wǎng)頁在線使用。
使用億圖圖示繪制雷達圖，可以直接使用模板來提升使用者的學習或辦公效率。

為什么選擇億圖圖示繪制雷達圖？

1、多平臺支持
億圖圖示支持Windows、Mac和Linux系統(tǒng)也包含國產(chǎn)操作系統(tǒng)，V10.1 版本支持桌面版與網(wǎng)頁版云同步存儲，文件還可以一鍵查看、分享。
2、支持多種格式導入
既可一鍵將導入Visio，SVG格式，也可以批量轉(zhuǎn)化Visio到Edraw文件，一鍵將您的圖表導出到各種格式，如圖片，Html，PDF，SVG，Office等，讓您的圖表格式更能滿足要求。
3、支持多種格式導出
一鍵即可將圖表轉(zhuǎn)化為Word、Excel、PowerPoint、PDF、SVG、PNG等格式，不為轉(zhuǎn)換格式擔憂。
4、操作簡單易上手
即使毫無繪圖基礎，但只要拖拽圖形就能添加到畫布，雙擊圖層就可以編輯文字，還可以一鍵配色、更改形狀圖樣。非常簡便快捷，方便繪圖制作。
5、功能多樣，模板豐富
億圖圖示擁有超過26000種圖形模板和矢量符號，還有“超鏈接”“附件”“符號”等技術支持不怕圖表不豐富?？梢噪S心使用，繪制出更滿意的圖表。
6、圖文混排，觀賞性強
功能多樣也就意味著圖表比起較單一的圖表更具觀賞性，圖文混排能夠很好地發(fā)揮文字和圖表的功能，方便觀賞者理解明白。

在線咨詢

上一篇：零基礎入門前端HTML知識整理
下一篇：快速完成網(wǎng)頁設計,10個頂尖響應式HTML5網(wǎng)頁模板助你一臂之力

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。