【正文】 四、全新的，更合理的 Tag 多媒體對象將不再全部綁定在 object 或 embed Tag 中，而是視頻有視頻的 Tag，音頻有音頻的 Tag。 HTML5 還引入了微數(shù)據(jù)，這一使用機器可以識別的標簽標注內(nèi)容的方法，使語義 Web 的處理更為簡單。 u， font， center， strike 這些標簽則被完全去掉了。 新的 HTML5 吸取了 XHTML2 一些建議，包括一些用來改善文檔結(jié)構(gòu)的功能，比如，新的 HTML 標簽 header, footer, dialog, aside, figure 等的使用，將使內(nèi)容創(chuàng)作者更加語義地創(chuàng)建文檔，之前的開發(fā)者在實現(xiàn)這些功能時一般都是使用 DIV。這種標簽將有利于搜索引擎的索引整理，同時更好的幫助小屏幕裝置和視障人士使用，除此之外，還為其他瀏覽要素提供了新的功能，如 audio和 video標記。 ” 支持 HTML5 的瀏覽器包括 Firefox（火狐瀏覽器）， IE9 及其更高版本， Chrome（谷歌瀏覽器） ， Safari， Opera 等；國內(nèi)的傲游瀏覽器（ Maxthon），以及基于 IE 所推出的 360 瀏覽器、搜狗瀏覽器、 瀏覽器、獵豹瀏覽器等國產(chǎn)瀏覽器同樣具備支持 HTML5 的能力。 2021 年 12 月 17 日，萬維網(wǎng)聯(lián)盟（ W3C）正式宣布凝結(jié)了大量網(wǎng)絡(luò)工作者心血的 HTML5規(guī)范已經(jīng)正式定稿。 HTML5 仍處于完善之中。 HTML5 草案的前身名為 Web Applications ，于 2021 年被 WHATWG 提出，于 2021年被 W3C 接納，并成立了新的 HTML 工作團隊。WHATWG 致力于 Web 表單和應(yīng)用程序，而 W3C（ World Wide Web Consortium，萬維網(wǎng)聯(lián)盟） 專注于 XHTML 。 HTML5 一個很有用實用的特性是用于繪畫的 Canvas 元素 ， Canvas 擁有許多繪制功能如畫筆、矩形、圓形、字符以及圖像處理的方法，他為人們在網(wǎng)頁繪圖及圖像處理帶來了方便。 HTML5 的出現(xiàn)再次告訴我們，我 們的生活，日常辦公，越來越有可能全在網(wǎng)頁端實現(xiàn)了。 HTML5 是 HTML 下一個的主要修訂版本，以期能在互聯(lián)網(wǎng)應(yīng)用迅速發(fā)展的時候，使網(wǎng)絡(luò)標準達到符合當代的網(wǎng)絡(luò)需求，現(xiàn)仍處于發(fā)展階段?？葱侣?，看電視，訂餐等等。 本文針對其引入的 Canvas 繪圖元素進行了深入的研究 ， 此元素可以替代畫圖作為動畫渲染的工具 ， 效率與安全性更高，開發(fā)更便捷，必將是以后的動畫，游戲等應(yīng)用首選的開發(fā)方式，前景非常好 。其中一個最值得提及的特性就是用于繪畫的 HTML Canvas，可以對 2D 或位圖進行動態(tài)、腳本的渲染?，F(xiàn)階段對于 HTML5 技術(shù)的研發(fā)和開發(fā)工作主要集中在技術(shù)草案的確立與新互聯(lián)網(wǎng)應(yīng)用的開發(fā)上，而隨著互聯(lián)網(wǎng)的發(fā)展 ， HTML標準也在不斷變化 ， HTML標準已經(jīng)走過第 4 代了 ， 因為它能夠用簡單的標簽元素 ， 代替屬性能實現(xiàn)之前需要用很多復(fù)雜 JavaScript代碼才能有實現(xiàn)的功能 ， HTML5 越來越受到歡迎 。 HTML5 是近十年來 Web 開發(fā)標準巨大的飛躍。 I 摘 要 帶來的豐富互聯(lián)網(wǎng)技術(shù)讓所有人都享受到了技術(shù)發(fā)展和體驗進步的樂趣 。 而作為下一代互聯(lián)網(wǎng)標準 ， HTML5 自然也是備受期待和矚目。和以前的版本不同 ， HTML5 并非僅僅用來表示 Web 內(nèi)容 ， 它的新使命是將 Web帶入一個成熟的應(yīng)用平臺 ， 在 HTML5 平臺上 ， 視頻、音頻、圖象、動畫 ， 以及同電腦的交互都被標準化。 HTML5 帶來很多令人激動的新特性，這在之前的 HTML 中是不可見到的。本文詳細分析了 HTML5 技術(shù)的簡介和發(fā)展前景，并深入探 討了 HTML5 引入的核心標簽Canvas 元素，介紹了 Canvas 可以實現(xiàn)的主要功能，在此基礎(chǔ)上實現(xiàn)了部分類似 Windows 畫圖板的功能，包括鉛筆、圖章仿制、畫直線、圓、矩形、橡皮擦、背景圖、取色板、插入文字等功能，在實現(xiàn)過程中也利用了最新的 CSS3 技術(shù) ， 最后再次總結(jié)了這次畢設(shè)的經(jīng)驗和對未來的展望。 【關(guān)鍵詞】 HTML5 CSS3 Canvas II ABSTRACT brings a wealth of Inter technology for all to enjoy the fun of technology development and experience progress. As a nextgeneration Inter standard, HTML5 is naturally highly anticipated and attention. HTML5 is a huge leap over the past decade Web development standards. Unlike the previous version,HTML5 is not just used to represent Web content, its new mission is the Web into a fullfledged application platform, HTML5 platform, video, audio, image, animation, and interaction with the puter be standardized. At this stage for the HTML5 technology and development work focused on the establishment of the draft technology and new Inter application development, HTML standards are changing with the development of the Inter, HTML standard has gone through four generations, because it simple label elements, instead of before the property can be realized with a lot of plex JavaScript code in order to achieve the functions, HTML5 has been more popular. HTML5 brings a lot of exciting new features. This is not seen in the previous HTML. One of the most worth mentioning the characteristics is HTML Canvas for painting, 2D or bitmap rendering of dynamic script. I detailed analysis the HTML5 technology introduction and development prospects, a deeper look into the core of the introduction of HTML5 tag Canvas element, the Canvas can be achieved, based on the a similar Windows drawing board, including pencil, stamp imitation, draw a straight line, circle, rectangle, eraser, background image, take a swatch in the realization of the process also takes advantage of the latest CSS3 techniques and, finally, this plete set up experience and vision for the future. This paper introduces the Canvas drawing elements which conducted research, this element can replace the drawing as a tool for animation rendering, higher efficiency and security, the development of more convenient, be the future animation, games and other application development method of choice , the outlook is very good. 【 Key words】 HTML5 CSS3 Canvas III 目 錄 前 言 .....................................................................................................................................1 第一章 關(guān)于 HTML5 和畫圖板 ..........................................................................................2 第一節(jié) HTML5 簡介 .........................................................................................................2 第二節(jié) HTML5 特性 .........................................................................................................2 第三節(jié) HTML5 國內(nèi)外發(fā)展現(xiàn)狀 .....................................................................................3 第四節(jié) 畫圖工具 ................................................................................................................4 第二章 相關(guān)技術(shù)簡介 .........................................................................................................5 第一節(jié) Canvas 元素簡介 ...................................................................................................5 第二節(jié) 第一個 Canvas 程序的實現(xiàn) ..................................................................................5 第三節(jié) JavaScript 及 jQuery簡介 .....................................................................................7 第四節(jié) CSS3 簡介 ..............................................................................................................9 第五節(jié) 開發(fā)工具 DreamWeaver 介紹 .............................................................................12 第六節(jié) 調(diào)試工具 Firefox及 Firebug簡介 ......................................................................13 第三章 功能設(shè)計 ...............................................................................................................16 第一節(jié) 需求設(shè)計 ..................................................