水車_ ·canvas 學習前提
1. 前言
canvas 屬于前端知識，但是學習 canvas 也是需要一些基礎的，今天我們就回顧一下學習 canvas 前需要掌握的內容。掌握內容主要分為兩部分，分別是 ：
- 什么是 HTML？
- 什么是 JavaScript？
下面我們就簡單回顧一下這兩個知識點。
2. HTML 基本知識簡單回顧
HTML 是一種超文本標記語言（英語：HyperText Markup Language，簡稱：HTML），它是一種用于創(chuàng)建網頁的標準標記語言。HTML 運行在瀏覽器上，由瀏覽器來解析。
我們來看一個最簡單的 HTML 實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕課網Wiki</title>
</head>
<body>
<h1>這是一個標題</h1>
<p>這是一個段落。</p>
</body>
</html>
2.1 HTML 標簽
我們平時看到的 WEB 頁面都是由標簽嵌套構成的，它們包含在一對尖括號中，例如上面的 <html>、<body> 或者是 <h1>，當然還有我們后面會用到 <canvas> 這個標簽，本套課程我們主要圍繞 <canvas> 這個標簽展開講解。
2.2 屬性
屬性是附屬在標簽上的，對標簽進行設定的一個概念。
大多數標簽的屬性以“名稱 = 值”的形式成對出現，由 “=” 分離并寫在開始標簽元素名之后。值一般由單引號或雙引號包圍，有些值的內容包含特定字符，在 HTML 中可以去掉引號。
這里主要介紹兩個所有標簽都會有的屬性。
- id 屬性為元素提供了在全文檔內的唯一標識。需要注意的是，一個 HTML 文件中，不同標簽的 id 值是不能重復的。
下面這個例子中，我們給 <h1> 這個標簽添加了一個 id 的屬性，給它賦值為：“head”。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕課網Wiki</title>
</head>
<body>
<h1 id="head">這是一個標題</h1>
<p>這是一個段落。</p>
</body>
</html>
- class 屬性提供一種將相似標簽分類的方式。多個標簽可以定義同樣的 class 屬性，class 經常被用作于設定 css 相關的樣式。
下面這個例子中，我們給兩個 <p> 標簽都添加了一個 class 的屬性，給它賦值為：“paragraph”。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕課網Wiki</title>
</head>
<body>
<h1 id="head">這是一個標題</h1>
<p class="paragraph">這是第一個段落。</p>
<p class="paragraph">這是第二個段落。</p>
</body>
</html>
3. JavaScript 的基本知識簡單回顧
JavaScript 是一種解釋型的編程語言，主要應用在 WEB 領域，當然更多應用場景我們這里不做討論，本教程中，我們只需要知道 JavaScript 可以幫助我們繪制 canvas 畫布即可。
JavaScript 代碼不管是內嵌還是從外部引入，它都會包含在一個 <script> 的標簽中。
我們看一個簡單的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕課網Wiki</title>
</head>
<body>
<h1 id="head">這是一個標題</h1>
<p class="paragraph">這是第一個段落。</p>
<p class="paragraph">這是第二個段落。</p>
<script>
alert("慕課網IMOOC.COM")
</script>
</body>
</html>
運行上面代碼，頁面會彈出一個提示框，內容為： “慕課網IMOOC.COM”。
當然 JavaScript 不會只有這么點能力，后面我們對 canvas 的所有操作都會用到它，這里就不詳細展開講述了。想要系統(tǒng)學習 JavaScript，可以查看慕課網中相關的課程。
4. 總結
本小節(jié)教程主要講解了學習 <canvas> 之前需要具備的知識。當然 HTML 和 JavaScript 不僅僅是上面講的這一點內容，隨便哪一個展開都是前端不可或缺的一塊兒內容。想要走前端這條路的同學，還是需要認真地去學習這些內容。我們本套 <canvas> 課程用到的知識點都屬于 HTML 和 JavaScript 的子內容，希望同學們能認真地去學習這塊兒內容。
2025 imooc.com All Rights Reserved |