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