通過(guò)代碼示例跟我學(xué)html5相關(guān)技術(shù)——html5中的canvas標(biāo)簽及應(yīng)用實(shí)例第1部分(編輯修改稿)
2024-12-20 07:40 本頁(yè)面
【文章內(nèi)容簡(jiǎn)介】 API 只是定義所要繪制的圖形的“輪廓”，并不會(huì)產(chǎn)生出最終的“可見(jiàn)”外觀。當(dāng)然，應(yīng)用路徑繪制 API 可以繪制出自定義的各種復(fù)雜的圖形，只需要應(yīng)用 moveTo()或者lineTo()等畫(huà)線(xiàn)函數(shù)繪制出期望的圖形的 路徑（輪廓） （ 3）圖形 /圖像變換 API 主要實(shí)現(xiàn)對(duì)圖形 /圖像進(jìn)行“縮放、旋轉(zhuǎn)、平移”等變換處理。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 10/22 頁(yè) 10 Canvas 的編程基礎(chǔ) 了解相關(guān)的 坐標(biāo)體系 Canvas 定義的矩形區(qū)域的坐標(biāo)體系 （ 1）坐標(biāo)系 寬度和高度的空間區(qū)域測(cè)量是以像素為單位給出的，畫(huà)布是基于 x 和 y 坐標(biāo)的使用來(lái)構(gòu)建的，畫(huà)布的 x=0、 y=0 坐標(biāo)位于左上角（坐標(biāo)系原點(diǎn)在 Canvas 所定義的矩形區(qū)域的左上角）。所畫(huà)圖形的位置就是相對(duì)這個(gè)原點(diǎn)水平偏移 x 個(gè)像素，垂直偏移 y 個(gè)像素的位置。 （ 2） Canvas 定義的矩形區(qū)域的默認(rèn)尺寸 畫(huà)布的矩形區(qū)域的 默認(rèn)屬性是 300 像素的寬度和 150 像素的高度，但可以通過(guò)指定寬度和高度來(lái)確定畫(huà)布元素的確切大小。 （ 3）坐標(biāo)系示例圖 下面的示意圖說(shuō)明了 x 和 y 坐標(biāo)的實(shí)現(xiàn)方式，給出了一個(gè) 100 像素 X100 像素的畫(huà)布區(qū)：左上角是 x=0， y=0； x 的值水平增加， y 的值垂直增加；右下角是 x=100， y=100；中間的點(diǎn)是x=50， y=50。 （ 4）顯示鼠標(biāo)坐標(biāo)位置值的代碼示例 !DOCTYPE HTML html head script type=text/javascript function getCoordinates(eventObj){ x=。 y=。 (showXYCoordinatesDivTagID).innerHTML=X、 Y 坐標(biāo)楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 11/22 頁(yè) 11 位置值： ( + x + , + y + )。 } function clearCoordinates(){ (showXYCoordinatesDivTagID).innerHTML=。 } /script /head body 把鼠標(biāo)懸停在矩形面板所在的區(qū)域內(nèi)，可以在右邊顯示出坐標(biāo)位置 div style=float:left。width:199px。height:99px。border:1px solid c3c3c3 onmousemove=getCoordinates(event) onmouseout=clearCoordinates()/div br / br / br / div id=showXYCoordinatesDivTagID/div /body /html 應(yīng)用 Canvas 的相關(guān)示例 如何應(yīng)用 Canvas （ 1）應(yīng)用 canvas標(biāo)簽在頁(yè)面中定義出畫(huà)布 要在畫(huà)布上繪制出任何的圖形，首先必須要在 HTML 頁(yè)面文件中定義出畫(huà)布 —— 這可以應(yīng)用 canvas標(biāo)簽達(dá)到此目的。 canvas標(biāo)簽的基本結(jié)構(gòu)如下： canvas id=myCanvas width=200 height=200 /canvas canvas標(biāo)簽元素自身除了有兩個(gè)主 要的屬性 width 和 height 之外，它也還擁有其它的HTML5 通用的屬性 —— 比如 class、 id 和 name 等。其中的 id 屬性被應(yīng)用在 JavaScript 腳本楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 12/22 頁(yè) 12 代 碼 中以 獲得 要 在上 面繪 畫(huà) 的畫(huà) 布對(duì) 象 —— 如下 面代 碼 所示 ： var canvas = (myCanvas)。 （ 2）獲得 2D 繪圖環(huán)境 每個(gè)畫(huà)布都必須要有一個(gè) Context（上下文繪圖環(huán)境）的對(duì)象，可以應(yīng)用畫(huà)布對(duì)象中的getContext 函數(shù)獲得，而目前所的繪圖環(huán)境為 2D 環(huán)境，因此需要應(yīng)用 (2d)。形式的參數(shù)獲得 2D 繪圖環(huán)境。如下面代碼所示： var context = (2d)。 在 Canvas 對(duì)象上創(chuàng)建圖形都是與 Canvas 對(duì)象的繪圖上下文環(huán)境 Context對(duì)象打交道，而通過(guò) Canvas 對(duì)象本身則可以獲取 Canvas 對(duì)象的尺寸大小（由兩個(gè)主要的屬性 width 和height 決定）等方面的信息；繪圖上下文環(huán)境 Context 對(duì)象與目標(biāo) Canvas 對(duì)象一一對(duì)應(yīng)，無(wú)論對(duì)同一 Canvas 對(duì)象調(diào)用幾次 getContext() 函數(shù)， 都將返回對(duì)同一個(gè)上下文對(duì)象的引用。 目前的 HTML5 中的 Canvas 對(duì)象支持 2D 形式的繪圖技術(shù)，在不久的將來(lái)，開(kāi)發(fā)人員還會(huì)能夠得到基于 OpenGL 的 3D 渲染上下文以在 Canvas 對(duì)象中進(jìn)行 3D 繪圖。 （ 3）按照應(yīng)用的要求繪圖 在標(biāo)識(shí)了畫(huà)布并獲得了與它相關(guān)聯(lián)的上下文繪圖環(huán)境對(duì)象之后，開(kāi)發(fā)人員就做好了開(kāi)始繪畫(huà)的準(zhǔn)備工作。當(dāng)然，要實(shí)現(xiàn)復(fù)雜的繪圖功能，需要開(kāi)發(fā)人員熟悉相關(guān)的繪圖工具、效果和轉(zhuǎn)換等方面的編程知識(shí)，也就是需要掌握與 Canvas 有關(guān)的繪圖工具、圖形效果和轉(zhuǎn)換處理等方面的編程知識(shí)： 1) 繪圖工具 ：線(xiàn)條、矩形、圓弧、貝塞爾曲線(xiàn)和二次曲線(xiàn)、圓和半圓。 2) Canvas 效果：填充和描邊、線(xiàn)性和徑向的漸變。 3) 轉(zhuǎn)換：縮放、旋轉(zhuǎn)、平移。 繪圖的圖形路徑 （ 1） beginPath()函數(shù)的作用 它用來(lái)通知 canvas 將要開(kāi)始繪制一個(gè)新的圖形，并完成圖形繪制的初始化過(guò)程；每調(diào)用一次 beginPath()函數(shù)，之前保存的路徑就都被重置清空。使用 closePath 函數(shù)閉合路徑，從而最終實(shí)現(xiàn)將起點(diǎn)和終點(diǎn)連接，這個(gè)函數(shù)和 lineTo 很像，唯一差別在于它會(huì)將路徑的起點(diǎn)和終點(diǎn)閉合，再使用 stroke 函數(shù)繪制出最終的圖形。 代碼示例： ()。 （ 2）使用 beginPath()函數(shù)重置當(dāng)前的圖形路徑 beginPath()函數(shù)是開(kāi)始一條新的路徑，在使用不同的子路徑繪制一條新的線(xiàn)段之前，必楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 13/22 頁(yè) 13 須要使用 beginPath()來(lái)標(biāo)明一個(gè)繪制過(guò)程要遵循的新起點(diǎn) —— 但在繪制第一條線(xiàn)段時(shí)，beginPath()方法的調(diào)用不是必須的；執(zhí)行 beginPath()函數(shù)后的畫(huà)筆默認(rèn)位置是 Canvas 坐標(biāo)系的原點(diǎn)。 在開(kāi)始繪制新路徑前如果不使用 beginPath()函數(shù)，因?yàn)槊看卫L制都要將之前的路徑重新繪制一遍，這時(shí)性能 會(huì)以指數(shù)下降。因此，每次開(kāi)始繪制路徑前都要調(diào)用 beginPath()函數(shù)開(kāi)始新路徑。在 Canvas 中繪制路徑，一般是不需要指定起點(diǎn)的，默認(rèn)的起點(diǎn)就是上一次繪制路徑的終點(diǎn)。 通過(guò) Canvas 的路徑方法，可以使用 Canvas 處理一些簡(jiǎn)單的矢量圖形，這樣在縮放時(shí)也不會(huì)失真。 （ 3）畫(huà)出路徑的輪廓線(xiàn)從而創(chuàng)建出圖形的外觀 每當(dāng)開(kāi)始一次新的圖形繪制任務(wù)，都需要先使用 beginPath() 方法來(lái)重置當(dāng)前的路徑path 對(duì)象至初始狀態(tài)，進(jìn)而再通過(guò)一系列對(duì) moveTo()或者 lineTo
高考資料相關(guān)推薦
鄂ICP備17016276號(hào)-1