社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
首頁 web前端 H5教程 HTML5 Canvas入門學習教學_html5教學技巧

HTML5 Canvas入門學習教學_html5教學技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
May 16, 2016 pm 03:45 PM
canvas html5

HTML5

究竟什麼是HTML5？在W3C HTML5的常見問題中，關於HTML5是這樣說明的：HTML5是一個開放的平台下開發的免費授權條款。
具體來說，對這句話有以下兩種理解：
「
指一組共同構成了未來開放式網路平台的技術。這些技術包括HTML5規範、CSS3、SVG、MATHML、地理位置、XmlHttpRequest、Context 2D、Web字體以及其他技術。
」

Canvas的瀏覽器支援
以下我列出了最受歡迎的Web瀏覽器以及它們開始支援Canvas元素的最小版本號。


這裡我推薦使用Chrome。

簡單的HTML5頁面

XML/HTML Code複製內容到剪貼簿
  1. html>  
  2.   
  3. html lang=lang=lang
    4. =
  4. lang
    5. =
  5. lang=lang=lang
    6. > 🎜>
  6. >      head>  
  7.     meta charset charset charset
  8. >       title
  9. >
  10. title>   head
  11. >  
  12.    body
>
 Hello Airing! 


2016317110813836.jpg (850×500) Hello cing! 






身體
>  
      
  1. html
    2. >
  


示範運行結果如下： HTML是由一個形如尖括號的標籤元素組成，這些標籤通常是成對出現，並且標籤之間只能嵌套不能交叉。
擴充：
成對出現的叫做閉合標籤，單一出現的叫做單標籤。不管怎樣都是閉合的(單標籤可以不閉合，但是在XHTML中嚴格要求了閉合)。閉合標籤又分為開始標籤和結束標籤，如是開始標籤，是結束標籤。自標籤如
等。
    關於更多的標籤，建議大家自行了解。推薦W3school平台自學。
  1. 這裡我們著重講一下上述程式碼中出現的標籤。 XML/HTML Code複製內容到剪貼簿 html>  


這個標籤說明 Web 瀏覽器將在標準模式下呈現頁面。根據 W3C 定義的 HTML5 規範，這是 HTML5 文件所必需的。這個標籤簡化了長期以來在不同的瀏覽器呈現 HTML 頁面時出現的奇怪差異。它通常為文檔中的第一行。
XML/HTML Code
複製內容到剪貼簿 html lang=lang=lang=lang=>   這是包含語言說明的標籤，例如，"en"為英語，"zh"為中文。 XML/HTML Code複製內容到剪貼簿
  1. head>...head>   

這2個標記符分別表示頭部訊息的開始和結尾。頭部中包含的標記是頁面的標題、序言、說明等內容，它本身不作為內容來顯示，而是影響網頁顯示的效果。頭部中最常用的標記符是

<title>標記符和<meta>標記符。

以下表格列出了HTML head 元素下的所有標籤和功能：

标签 描述
<head> 定义了文档的信息
<title> 定义了文档的标题
<base> 定义了页面链接标签的默认链接地址
<link> 定义了一个文档和外部资源之间的关系
<meta> 定义了HTML文档中的元数据
<script> 定义了客户端的脚本文件
<style> 定义了HTML文档的样式文件

XML/HTML Code複製內容到剪貼簿
  1. meta charset=charset=charset=
charset
>

>

  
這個標籤說明 Web 瀏覽器使用的字元編碼模式，這裡通常設定為UTF-8。如果沒有需要特別設定的沒必要改變它。這也是 HTML5 頁面需要的元素。
  1. XML/HTML Code複製內容到剪貼簿 title>...
title

>

   
這個標籤說明在瀏覽器視窗顯示的 HTML 的標題。這是一個很重要的標記，它是搜尋引擎用來在 HTML 頁面上收錄內容的主要資訊之一。
  1. XML/HTML Code複製內容到剪貼簿 body>...
body

>

   

網頁中顯示的實際內容均包含在這2個之間。
綜上，HTML5網頁是由第一行的與部分組成，而主要分為兩部分－由標籤規定的頭部部分，和由規定的主體部分。
這樣，我們就把最簡單的HTML網頁的基本結構給捋出來了。 增加一個Canvas
在HTML中加入Canvas非常簡單，只需要在HTML的部分，加上上標籤就可以了！可以參考下面的程式碼。 XML/HTML Code複製內容到剪貼簿
  1. html>htmlhtml ="zh">頭>meta charset="UTF-8">>>>> title>基礎的HTML5頁面title> 
  2. head>  
    3. body>       canvas id=
  3. "canvas"
    4. >
  4.        你的瀏覽器居然不支援Canvas？ ！趕快換一個吧！ ！        canvas>
  5. body>     
html

>

  

由於結果頁面是一個完整的空白頁面，所以這裡我就不貼圖了。大家可能會很好奇，為什麼會是一個空白呢？ （廢話，我還沒來得及畫畫呢！）Canvas的本意是畫布，也就是畫布的意思（廢話...），畫佈在HTML5中是透明的，是看不見的。 那標籤中的那段文字是什麼意思呢？那就是一旦瀏覽器執行HTML頁面時不支援Canvas，就會顯示這段文字，換言之，只要你的瀏覽器支援Canvas，頁面上就不會顯示這個文字。 那中的id是什麼意思？ id是標籤的屬性之一，在JavaScript程式碼中用來指定特定的的名字，就像一個人的身分證號碼一樣，是唯一的。 為了更清楚的展示Canvas，以及方便之後的演示，我稍微修改了一下程式碼，之後的繪圖都會在這個Canvas上繪製。
XML/HTML Code複製內容到剪貼簿
  1. html>  
  2. html lang="zh" >  
  3. 頭>  
  4. 元 字符集="UTF- 8">  
  5. 標題>基礎畫布基礎畫布基礎畫布
    6. >   頭
  6. >
    7.   
  7.   
    8. 身體
  8. >   div id=
    9. id
  9. =id=id=id=id=id=id=id> 」>       畫布
    10.  
  10. id
    11. =
  11. "畫布"  樣式=「邊框：1 像素實線#aaaaaa；顯示：區塊；邊距：50 像素自動；」
  12. 寬度="800" 高度
    13.  
  13. 🎜>" 600">       你的瀏覽器居然不支援Canvas？ ！趕緊換一個吧！ ！   
  14.     畫布>  
 🎜>
div>   身體>     html>  

運行結果：
2016317111155702.jpg (850×500)

以上程式碼有幾點說明：

1.新增了

標籤，將包裹其中，個人習慣，暫時並沒有什麼卵用。
2.給標籤指定了width和height屬性，規定了它的寬和高。
3.為標籤添加了一個內聯樣式，使其變為區塊級元素並居中顯示。

關於CSS的內容這裡不做說明，畢竟這不是本課程的主角，若做擴充會花費大量篇幅。

引用Canvas元素


文件物件模型(DOM)
文件物件模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴充標誌語言的標準程式介面。 Document Object Model的歷史可以追溯至1990年代後期微軟與Netscape的“瀏覽器大戰”，雙方為了在JavaScript與JScript一決生死，於是大規模的賦予瀏覽器強大的功能。微軟在網頁技術上加入了不少專屬事物，計有VBScript、ActiveX、以及微軟自家的DHTML格式等，使不少網頁使用非微軟平台及瀏覽器無法正常顯示。 DOM即是當時蘊釀出來的傑作。
文檔物件模型代表了在 HTML 頁面上的所有物件。它是語言中立且平台中立的。它允許頁面的內容和樣式被 Web 瀏覽器渲染之後再次更新。使用者可以透過 JavaScript 存取 DOM。
在開始使用前,首先需要了解兩個特定的 DOM 物件：window 和 document。

window 物件是 DOM 的最高一級，需要對這個物件進行偵測來確保開始使用 Canvas 應用程式之前，已經載入了所有的資源和程式碼。
document 物件包含所有在 HTML 頁面上的 HTML 標籤。需要對這個物件進行檢索來找 出用 JavaScript 操縱的實例。

JavaScript放置位置
使用JavaScript 為Canvas 程式設計會產生一個問題：在建立的頁面中，從哪裡啟動JavaScript程式?
把JavaScript 放進HTML 頁面的

標籤中是個不錯的主意，這樣做的好處是很容易找到它，也是上一章我們介紹中所提到的。但是，把 JavaScript 程式放在這裡就代表整個 HTML 頁面要載入完 JavaScrpit 才能配合 HTML 運行，這段 JavaScript 程式碼也會在整個頁面載入前就開始執行了。結果就是，執行 JavaScript 程式之前必須檢查 HTML 頁面是否已經載入完畢。
最近有一個趨勢是將 JavaScript 放在 HTML 文件結尾處的標籤之前，這樣就可以確保在 JavaScript 運行時整個頁面已經加載完畢。然而，由於在運行程式前需要使用 JavaScript 測試頁面是否加載，因此最好還是將 JavaScript 放在中。
不過本人不走尋常路(笑)，所以之後的案例，還是按照自己的編碼風格將JavaScript程式碼放在了的尾部。當然，如果JavaScript程式碼有些多，就推薦使用載入外部 .js 檔案的方式。程式碼大致如下：
JavaScript Code複製內容到剪貼簿
  1. <script>"text/javascript" src="bootstarp.js"   

在實際專案開發中，都是將HTML、CSS、JS三者完全分開的。不過用於案例示範程式碼略少，所以大多沒有使用載入外部 .js 檔案的方式。



取得canvas物件
取得canvas物件其實就是一句話的事情。

JavaScript Code複製內容到剪貼簿
  1. var canvas = document.getElementById("canvas");  

var用於變數定義，由於JS是弱型別語言，所以定義啥變數都用var。跟在var之後的canvas是變數。使用document物件的getElementById()的方法，透過id取得物件。之前我們為標籤賦予了一個id，名叫canvas，所以該句話最後一個canvas是指的id——canvas。 （是不是有點繞，需要自己多讀幾遍捋清楚。）
取得畫筆(2D環境)
畫畫首先需要啥？畫筆啊。取得canvas畫筆也是一句話的事情，就是直接使用剛才取得的canvas對象，呼叫它的getContext("2d")方法，即可。

JavaScript Code複製內容到剪貼簿
  1. var context = canvas.getContext("2d");;
這裡的context便是畫筆了。
在其他教學課程都是使用2D環境這個專有術語，我覺得畫筆更有形象。靈感引自Java中Graphics類別的g畫筆，原理與之相同。


總結


準備工作只有三步驟：
1.佈置畫布：透過新增標籤，新增canvas元素2.取得畫布：透過標籤的id，取得canvas物件

3.取得畫筆：透過canvas物件的getContext ("2d")方法，獲得2D環境


對應的程式碼也就是三句話：

JavaScript Code
複製內容到剪貼簿
      
  2. var canvas = document.getElementById("canvas""canvas"
  3. var context = canvas.getContext("2d"); 
完整程式碼如下。


JavaScript Code
複製內容到剪貼簿
  1. html>   
  2. "zh">   
  3.   
  4.     <meta> "UTF-8">   
  5.     <title>基礎的Canvas   
  6.   
  7.   
  8.   
  9. "canvas-warp">   
  10.     "canvas" style="border 1px sol5; " width="800" height="600">  
    11.         你的瀏覽器居然不支援Canvas？ ！趕快換一個吧！ ！   
    12.        
  
    •   
    • <script>   
    • window.onload = 
  • function(){   
    •     
  • var canvas = document.getElementById("canvas"     
    • var
  •  context = canvas.getContext("2d"; }   
    •   
    •   
    •   
    •   
    •   
    • 注意幾點：
    1.JavaScript程式碼需要包裹在<script>標籤中。

    2016317111405657.png (1433×771)2.window.onload = function(){}載入頁面後就要立即執行，表示網頁載入完執行後面的那個function函數體的內容。

    至此，畫布和畫筆已經準備完畢，接下來就讓我們使用畫筆(context物件)繪製出高逼格的圖像吧！覺醒吧！藝術家之魂！

    本網站聲明
    本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

    熱AI工具

    Undresser.AI Undress

    Undresser.AI Undress

    人工智慧驅動的應用程序，用於創建逼真的裸體照片

    AI Clothes Remover

    AI Clothes Remover

    用於從照片中去除衣服的線上人工智慧工具。

    Undress AI Tool

    Undress AI Tool

    免費脫衣圖片

    Clothoff.io

    Clothoff.io

    AI脫衣器

    Video Face Swap

    Video Face Swap

    使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

    顯示更多

    熱門文章

    刺客信條陰影：貝殼謎語解決方案
    3 週前 By DDD
    Windows 11 KB5054979中的新功能以及如何解決更新問題
    2 週前 By DDD
    在哪裡可以找到原子中的起重機控制鑰匙卡
    3 週前 By DDD
    <🎜>：死鐵路 - 如何完成所有挑戰
    4 週前 By DDD
    Atomfall指南：項目位置，任務指南和技巧
    4 週前 By DDD
    顯示更多

    熱工具

    記事本++7.3.1

    記事本++7.3.1

    好用且免費的程式碼編輯器

    SublimeText3漢化版

    SublimeText3漢化版

    中文版，非常好用

    禪工作室 13.0.1

    禪工作室 13.0.1

    強大的PHP整合開發環境

    Dreamweaver CS6

    Dreamweaver CS6

    視覺化網頁開發工具

    SublimeText3 Mac版

    SublimeText3 Mac版

    神級程式碼編輯軟體(SublimeText3)

    顯示更多

    熱門話題

    gmail信箱登陸入口在哪裡
    7654
    15
    CakePHP 教程
    1393
    52
    steam的賬戶名稱是什麼格式
    91
    11
    win11激活密鑰永久
    73
    19
    NYT迷你填字遊戲答案
    37
    110
    顯示更多
    Related knowledge
    HTML 中的表格邊框 HTML 中的表格邊框 Sep 04, 2024 pm 04:49 PM

    HTML 表格邊框指南。在這裡，我們以 HTML 中的表格邊框為例，討論定義表格邊框的多種方法。

    HTML 中的巢狀表 HTML 中的巢狀表 Sep 04, 2024 pm 04:49 PM

    這是 HTML 中巢狀表的指南。這裡我們討論如何在表中建立表格以及對應的範例。

    HTML 左邊距 HTML 左邊距 Sep 04, 2024 pm 04:48 PM

    HTML 左邊距指南。在這裡，我們討論 HTML margin-left 的簡要概述及其範例及其程式碼實作。

    HTML 表格佈局 HTML 表格佈局 Sep 04, 2024 pm 04:54 PM

    HTML 表格佈局指南。在這裡，我們詳細討論 HTML 表格佈局的值以及範例和輸出。

    HTML 輸入佔位符 HTML 輸入佔位符 Sep 04, 2024 pm 04:54 PM

    HTML 輸入佔位符指南。在這裡，我們討論 HTML 輸入佔位符的範例以及程式碼和輸出。

    在 HTML 中移動文字 在 HTML 中移動文字 Sep 04, 2024 pm 04:45 PM

    HTML 中的文字移動指南。在這裡我們討論一下marquee標籤如何使用語法和實作範例。

    HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

    HTML 有序列表指南。在這裡我們也分別討論了 HTML 有序列表和類型的介紹以及它們的範例

    HTML onclick 按鈕 HTML onclick 按鈕 Sep 04, 2024 pm 04:49 PM

    HTML onclick 按鈕指南。這裡我們分別討論它們的介紹、工作原理、範例以及各個事件中的onclick事件。

    See all articles