最近中文字幕高清中文字幕无,亚洲欧美高清一区二区三区,一本色道无码道dvd在线观看 ,一个人看的www免费高清中文字幕

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

canvas 學(xué)習(xí)前提

1. 前言

canvas 屬于前端知識，但是學(xué)習(xí) canvas 也是需要一些基礎(chǔ)的，今天我們就回顧一下學(xué)習(xí) canvas 前需要掌握的內(nèi)容。掌握內(nèi)容主要分為兩部分，分別是 ：

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

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

2. HTML 基本知識簡單回顧

HTML 是一種超文本標記語言（英語：HyperText Markup Language，簡稱：HTML），它是一種用于創(chuàng)建網(wǎng)頁的標準標記語言。HTML 運行在瀏覽器上，由瀏覽器來解析。

我們來看一個最簡單的 HTML 實例：

實例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕課網(wǎng)Wiki</title>
</head>
<body>
    <h1>這是一個標題</h1>
    <p>這是一個段落。</p>
</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

2.1 HTML 標簽

我們平時看到的 WEB 頁面都是由標簽嵌套構(gòu)成的，它們包含在一對尖括號中，例如上面的 <html>、<body> 或者是 <h1>，當然還有我們后面會用到 <canvas> 這個標簽，本套課程我們主要圍繞 <canvas> 這個標簽展開講解。

2.2 屬性

屬性是附屬在標簽上的，對標簽進行設(shè)定的一個概念。

大多數(shù)標簽的屬性以“名稱 = 值”的形式成對出現(xiàn)，由 “=” 分離并寫在開始標簽元素名之后。值一般由單引號或雙引號包圍，有些值的內(nèi)容包含特定字符，在 HTML 中可以去掉引號。

這里主要介紹兩個所有標簽都會有的屬性。

  • id 屬性為元素提供了在全文檔內(nèi)的唯一標識。需要注意的是，一個 HTML 文件中，不同標簽的 id 值是不能重復(fù)的。

下面這個例子中，我們給 <h1> 這個標簽添加了一個 id 的屬性，給它賦值為：“head”。

實例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕課網(wǎng)Wiki</title>
</head>
<body>
    <h1 id="head">這是一個標題</h1>
    <p>這是一個段落。</p>
</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果
  • class 屬性提供一種將相似標簽分類的方式。多個標簽可以定義同樣的 class 屬性，class 經(jīng)常被用作于設(shè)定 css 相關(guān)的樣式。

下面這個例子中，我們給兩個 <p> 標簽都添加了一個 class 的屬性，給它賦值為：“paragraph”。

實例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕課網(wǎng)Wiki</title>
</head>
<body>
    <h1 id="head">這是一個標題</h1>
    <p class="paragraph">這是第一個段落。</p>
    <p class="paragraph">這是第二個段落。</p>
</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

3. JavaScript 的基本知識簡單回顧

JavaScript 是一種解釋型的編程語言，主要應(yīng)用在 WEB 領(lǐng)域，當然更多應(yīng)用場景我們這里不做討論，本教程中，我們只需要知道 JavaScript 可以幫助我們繪制 canvas 畫布即可。

JavaScript 代碼不管是內(nèi)嵌還是從外部引入，它都會包含在一個 <script> 的標簽中。

我們看一個簡單的例子：

實例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕課網(wǎng)Wiki</title>
</head>
<body>
    <h1 id="head">這是一個標題</h1>
    <p class="paragraph">這是第一個段落。</p>
    <p class="paragraph">這是第二個段落。</p>
    <script>
    	alert("慕課網(wǎng)IMOOC.COM")
    </script>
</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

運行上面代碼，頁面會彈出一個提示框，內(nèi)容為： “慕課網(wǎng)IMOOC.COM”。

當然 JavaScript 不會只有這么點能力，后面我們對 canvas 的所有操作都會用到它，這里就不詳細展開講述了。想要系統(tǒng)學(xué)習(xí) JavaScript，可以查看慕課網(wǎng)中相關(guān)的課程。

4. 總結(jié)

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