通過(guò)代碼示例跟我學(xué)html5相關(guān)技術(shù)——html5中的canvas標(biāo)簽及應(yīng)用實(shí)例（第1部分(文件)
【正文】 通過(guò)路徑來(lái)構(gòu)造。 （ 3） strokeRect(x,y,width,height) 該方法繪制一個(gè)矩形的外邊框 （ 4） clearRect(x,y,width,height) 該方法清空指定的區(qū)域，使之變得完全透明。 charset=gb18030 titleHTML5 的 2D Canvas 示例頁(yè)面 /title script type=text/javascript language= = function() { var canvas = (39。 (25,25,50,50)。my_canvas39。nocanvas39。 /script /head body section header h12D Canvas section 示例 /h1 /header p canvas id=my_canvas width=480 height=320/canvas div id=nocanvas style=display:none你的瀏覽器不支持 2D Canvas 相關(guān)的技術(shù) /div 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 22/22 頁(yè) 22 /p /section /body /html （ 2）執(zhí)行的結(jié)果 1繪制多邊形 由于在 Canvas 對(duì)象中的原生支持的基本幾何圖形只有矩形一種，如果需要畫其它的多邊形等圖形，則都需要由路徑來(lái)負(fù)責(zé)繪制 實(shí)現(xiàn) ——因?yàn)樵?API 中并沒有直接提供畫特定的多邊形的函數(shù)。block39。none39。 (100,100,50,50)。)。 對(duì)于這三個(gè)函數(shù)中的每個(gè)函數(shù)來(lái)說(shuō)，參數(shù)中的 x 和 y 值表示的都是畫布上相對(duì)于矩形左上角的坐標(biāo)位置，而 width 和 height 分別是矩形的寬度和高度。 （ 2） rect(in float x, in float y, in float w, in float h) 該函數(shù)繪制一個(gè)矩形路徑，通過(guò)參數(shù)指定左上角位置以及寬和高。66330039。 var context = (2d)。block39。none39。 ()。 (300, 150)。 = square。 (50, 100)。 = 0000FF。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 18/22 頁(yè) 18 // 繪出有著圓形端點(diǎn)的藍(lán)色線段 ()。 charset=gb18030 titleHTML5 的 2D Canvas 示例頁(yè)面 /title script type=text/javascript language= = function() { var canvas = (39。目前 Canvas 對(duì)象中的線段主要支持對(duì)接（ butt）線帽（它是默認(rèn)值）、圓形（ round）和方形（ square）三種線帽風(fēng)格。). = 39。). = 39。f0039。 (100,100)。 //該屬性是線段的寬度 = 0000FF。 ()。)。 （ 2） strokeStyle 屬性 strokeStyle 屬性改變線段的顏色。但要注意的是，不管調(diào)用上面的 moveTo 還是 lineTo 中的任何一個(gè)函數(shù)，都不會(huì)真正畫出圖形的線條線 —— 因?yàn)樗鼈兤鋵?shí)只是創(chuàng)建出“繪制路徑”。 （ 2） moveTo()函數(shù) 指明新的子路徑從哪里開始，從而可以指定子路徑的新起點(diǎn)。 定義完路徑的輪廓，此時(shí) Canvas 畫面中沒有顯示任何路徑，開發(fā)人員還可以對(duì)路徑進(jìn)行修改。因此，每次開始繪制路徑前都要調(diào)用 beginPath()函數(shù)開始新路徑。使用 closePath 函數(shù)閉合路徑，從而最終實(shí)現(xiàn)將起點(diǎn)和終點(diǎn)連接，這個(gè)函數(shù)和 lineTo 很像，唯一差別在于它會(huì)將路徑的起點(diǎn)和終點(diǎn)閉合，再使用 stroke 函數(shù)繪制出最終的圖形。當(dāng)然，要實(shí)現(xiàn)復(fù)雜的繪圖功能，需要開發(fā)人員熟悉相關(guān)的繪圖工具、效果和轉(zhuǎn)換等方面的編程知識(shí)，也就是需要掌握與 Canvas 有關(guān)的繪圖工具、圖形效果和轉(zhuǎn)換處理等方面的編程知識(shí)： 1) 繪圖工具 ：線條、矩形、圓弧、貝塞爾曲線和二次曲線、圓和半圓。如下面代碼所示： var context = (2d)。 canvas標(biāo)簽的基本結(jié)構(gòu)如下： canvas id=myCanvas width=200 height=200 /canvas canvas標(biāo)簽元素自身除了有兩個(gè)主 要的屬性 width 和 height 之外，它也還擁有其它的HTML5 通用的屬性 —— 比如 class、 id 和 name 等。 } /script /head body 把鼠標(biāo)懸停在矩形面板所在的區(qū)域內(nèi)，可以在右邊顯示出坐標(biāo)位置 div style=float:left。 （ 4）顯示鼠標(biāo)坐標(biāo)位置值的代碼示例 !DOCTYPE HTML html head script type=text/javascript function getCoordinates(eventObj){ x=。 楊教授工作室 精心創(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è)量是以像素為單位給出的，畫布是基于 x 和 y 坐標(biāo)的使用來(lái)構(gòu)建的，畫布的 x=0、 y=0 坐標(biāo)位于左上角（坐標(biāo)系原點(diǎn)在 Canvas 所定義的矩形區(qū)域的左上角）。上面示例中的如下的 div標(biāo)簽的主要作用則是給出相關(guān)的錯(cuò)誤信息。將不對(duì)鼻子進(jìn)行填充，所以使用 () 函數(shù)。這就是主要的臉部。 } } 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 7/22 頁(yè) 7 /script /head body onload=loadCanvas()。 (39。 } else { (39。 ()。 (280,110,15,0,*2,true)。 ()。 = rgb(255,255,204)。2d39。 charset=gb18030 titleHTML5 的 2D Canvas 示例頁(yè)面 /title script function loadCanvas() { var canvas = (39。如果可以正確的獲得，則表明此時(shí)的瀏覽器支持 canvas 標(biāo)簽元素；如果不能正確地獲得，則表示此時(shí)的瀏覽器不支持 canvas 標(biāo)簽
高考資料相關(guān)推薦
鄂ICP備17016276號(hào)-1