Canvas開發前的JavaScript準備（二）
阿新 • • 發佈：2018-12-12
何為JavaScript？這裡不會詳細介紹，因為這也是一門很有學問東西，這裡主要講Canvas，你只要知道它是一種指令碼執行語言就可以了，瀏覽器解釋就可以執行，那我們為什麼要用他呢？因為Canvas只是個頁面標籤，Canves的繪畫並不是在Canves上執行的，而是在一個叫2D渲染上下文API上執行的，這個API介面就在JavaScript中，相當於我們只要呼叫封裝好的函式介面，傳遞需要的引數就會在Canves顯示出繪畫。
那如何調入這個API呢？其實別人都幫我們封裝好了。我們只需引用程式碼檔案就ok了。
1、搜尋jQuery下載，進入官網，或者任何地方，下載下圖中任何一個，建議使用帶min的，這是壓縮檔案，相對空間小一點，下載檔案jquery-3.3.1.min.js
2、將上面的檔案放入與你建立的網頁的同個檔案下；
3、在WebStorm中，編輯JavaScript引入程式碼；並寫一個載入頁面完成時彈窗的動作；
<!DOCTYPE html> <!-- 告訴瀏覽器我們使用的HTML模板為HTML5 --> <html lang="en"> <!-- 網頁頁面的根，其他元素均放在其中，只能有一個 --> <head> <!--頁面所有meta元素均包含在這裡 --> <meta charset="UTF-8"> <!-- 編碼方式 --> <title>Canves高速入門</title> <!-- 頁面設定名稱，顯示在瀏覽器標題欄中 --> <!-- CSS 及 javascript 程式碼放置處 --> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <!-- 引用jQuery庫--> <script type="text/javascript"> $(document).ready(function(){ alert("HELLO WORLD!!!") }); <!-- 引用jQuery庫彈出 Hello world 操作--> </script> </head> <body> <!-- 頁面的主題內容均在這裡 --> <div>HTML5之Canves高速入門</div> <!-- 頁面的元素擺放 --> </body> </html>
這樣jQuery的引入就完成了，JavaScript的準備工作就完成了！！！