通過代碼示例跟我學(xué)html5相關(guān)技術(shù)——html5中的canvas標(biāo)簽及應(yīng)用實(shí)例第1部分-展示頁
2024-11-26 07:40本頁面
【正文】 件中，而避免在頁面body標(biāo)簽區(qū)域內(nèi)放置 JavaScript 腳本代碼，可以動(dòng)態(tài)設(shè)置頁面 body標(biāo)簽的 onload 事件響應(yīng)函數(shù)。 } }。). = 39。 (39。). = 39。 } else { (39。)。 charset=gb18030 titleHTML5 的 2D Canvas 示例頁面 /title script type=text/javascript language= = function() { var canvas = (39。 這些 API 還允許 canvas 標(biāo)簽元素所產(chǎn)生的繪圖對象成為交互式的并對鼠標(biāo)操作和鍵盤操作等用戶輸入做出事件響應(yīng)，從而促進(jìn)在 canvas 標(biāo)簽元素所定義的長方形區(qū)域中創(chuàng)建游戲和更復(fù)雜的 Web 應(yīng)用程序。 （ 4）在 Canvas 標(biāo)簽元素中包含有用來繪制路徑、矩形、圓形和字符的 API 方法，開發(fā)人員應(yīng)用此 JavaScript 腳本代碼的 API，實(shí)現(xiàn)復(fù)雜的繪圖和圖像處理功能。 canvas 標(biāo)簽元素的主要的功能 （ 1）該標(biāo)簽元素已經(jīng)被標(biāo)準(zhǔn)化并與一系列 2D 繪圖 API 包括在 HTML5 規(guī)范中 （ 2）這些 API 可以用于創(chuàng)建該元素內(nèi)的形狀、文本、過渡和動(dòng)畫。但在 CSS 中為 canvas 標(biāo)簽定義寬高，實(shí)際是將 Canvas所在的長方形區(qū)域進(jìn)行拉伸，因此，如果在這樣的情況下在 Canvas 中繪圖，得到的圖形可能就是變形的。 但 canvas 標(biāo)簽元素只是簡單地創(chuàng)建了一個(gè) Canvas 對象而已，此時(shí)的 canvas 標(biāo)簽元素看上去與 div標(biāo)簽元素沒什么區(qū)別，在頁面中沒有具體的外觀。從而可以在該長方形區(qū)域內(nèi)允許創(chuàng)建出動(dòng)態(tài)、可腳本渲染的 2D 圖形和位圖圖像。楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 1/22 頁 1 目 錄 HTML5 中的 Canvas 標(biāo)簽及應(yīng)用實(shí)例（第 1 部分） ............................................. 2 Canvas 標(biāo)簽概述 ................................................................................................. 2 Canvas 的編程基礎(chǔ) .................................................................................................. 10 了解相關(guān)的坐標(biāo)體系 ........................................................................................ 10 應(yīng)用 Canvas 的相關(guān)示例 .................................................................................. 11 繪制直線、矩形示例 ........................................................................................ 14 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 2/22 頁 2 HTML5 中的 Canvas 標(biāo)簽及應(yīng)用實(shí)例 （第 1 部分） Canvas 標(biāo)簽 概述 什么是 Canvas （ 1）實(shí)現(xiàn)繪制圖形和動(dòng)畫 Canvas（畫布）是一個(gè)非常有用的繪圖、圖像處理和創(chuàng)建動(dòng)畫的組件元素， Canvas 使用 JavaScript 腳本程序?qū)崿F(xiàn)直接在 Web 頁面上繪制圖形、圖像處理和動(dòng)畫 —— 可實(shí)現(xiàn)增強(qiáng)UI、示意圖、相冊、圖表、圖形、動(dòng)畫和嵌入式繪圖等方面的應(yīng)用。 （ 2） canvas 標(biāo)簽元素定義一個(gè)由頁面開發(fā)人員自定義和控制的長方形區(qū)域 該長方形區(qū)域稱為畫布（類似于油畫中的油布），可以編程控制其每一像素。該長方形區(qū)域主要是由 canvas 標(biāo)簽元素定義和描述 —— 定義寬度、高度（它們是以像素為單位）和唯一ID。 （ 3）定義 canvas 標(biāo)簽元素的寬高度 canvas 標(biāo)簽跟其它標(biāo)簽一樣，可以通 過 CSS 定義它的顯示樣式，也可以用它本身支持的 HTML 成員屬性定義寬和高。所以建議直接在 Canvas 中用 HTML 成員屬性定義寬和高。 （ 3）它可以促 進(jìn)快速創(chuàng)建圖表、交互式游戲、繪圖應(yīng)用程序以及其他圖形，而無需 Adobe Flash 等外部插件。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 3/22 頁 3 如何在 Canvas 中繪圖及模板頁面和代碼 （ 1）應(yīng)用 JavaScript 腳本代碼繪制圖形對象 開發(fā)人員必須使用一系列 JavaScript 腳本代碼的 API在 canvas 標(biāo)簽元素所定義的長方形區(qū)域中實(shí)際繪制圖形對象，在 HTML5 中針對 Canvas 標(biāo)簽元素所產(chǎn)生的繪圖對象提供有一套 API—— 這些 API 允許開發(fā)人員繪制形狀和線條、應(yīng)用顏色、不透明性以及傾斜度、轉(zhuǎn)換 Canvas 對象以及執(zhí)行動(dòng)畫等復(fù)雜的功能。 （ 2）模板頁面和代碼 !DOCTYPE HTML html head meta equiv=ContentType content=text/html。my_canvas39。 if() { var context = (2d)。my_canvas39。none39。nocanvas39。block39。 /script /head body 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 4/22 頁 4 section header h12D Canvas section 示例 /h1 /header p canvas id=my_canvas width=600 height=500/canvas div id=nocanvas style=display:none你的瀏覽器不支持 2D Canvas 相關(guān)的技術(shù) /div /p /section /body /html （ 3）對示例中相關(guān)的標(biāo)簽解釋 在示例頁面中只是聲明 canvas標(biāo)簽元素，該標(biāo)簽定義出一個(gè)矩形區(qū)域的寬度、高度和唯一的 ID 屬性。 script type=text/javascript language= = function() { }。 也可以將該時(shí)間響應(yīng)方法放在一個(gè)外部的 *.js 文件中定義，從而徹底地分離頁面的 HTML 內(nèi)容和行為
高考資料相關(guān)推薦
鄂ICP備17016276號-1