亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

水車_ · 更新于 2021-01-13

canvas 學習前提

1. 前言

canvas 屬于前端知識，但是學習 canvas 也是需要一些基礎的，今天我們就回顧一下學習 canvas 前需要掌握的內容。掌握內容主要分為兩部分，分別是 ：

  1. 什么是 HTML？
  2. 什么是 JavaScript？

下面我們就簡單回顧一下這兩個知識點。

2. HTML 基本知識簡單回顧

HTML 是一種超文本標記語言（英語：HyperText Markup Language，簡稱：HTML），它是一種用于創建網頁的標準標記語言。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 的所有操作都會用到它，這里就不詳細展開講述了。想要系統學習 JavaScript，可以查看慕課網中相關的課程。

4. 總結

本小節教程主要講解了學習 <canvas> 之前需要具備的知識。當然 HTML 和 JavaScript 不僅僅是上面講的這一點內容，隨便哪一個展開都是前端不可或缺的一塊兒內容。想要走前端這條路的同學，還是需要認真地去學習這些內容。我們本套 <canvas> 課程用到的知識點都屬于 HTML 和 JavaScript 的子內容，希望同學們能認真地去學習這塊兒內容。