通過代碼示例跟我學(xué)html5相關(guān)技術(shù)——html5中的canvas標(biāo)簽及應(yīng)用實例第1部分-資料下載頁
2024-11-14 07:40本頁面
【導(dǎo)讀】UI、示意圖、相冊、圖表、圖形、動畫和嵌入式繪圖等方面的應(yīng)用。該長方形區(qū)域稱為畫布，可以編程控制其每一像素。在該長方形區(qū)域內(nèi)允許創(chuàng)建出動態(tài)、可腳本渲染的2D圖形和位圖圖像。元素看上去與<div>標(biāo)簽元素沒什么區(qū)別，在頁面中沒有具體的外觀。所以建議直接在Canvas中用HTML成員屬性定義寬和高。這些API可以用于創(chuàng)建該元素內(nèi)的形狀、文本、過渡和動畫。轉(zhuǎn)換Canvas對象以及執(zhí)行動畫等復(fù)雜的功能。創(chuàng)建游戲和更復(fù)雜的Web應(yīng)用程序。<divid="no-canvas"style="display:none">你的瀏覽器不支持2DCanvas
【正文】 e=text/javascript language= = function() { var canvas = (39。my_canvas39。)。 if() { var context = (2d)。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 18/22 頁 18 // 繪出有著圓形端點的藍色線段 ()。 (50, 50)。 (300,50)。 = 10。 = 0000FF。 = round。 ()。 // 繪出有著方形端點的綠色線段 ()。 (50, 100)。 (300,100)。 = 20。 = 00FF00。 = square。 ()。 // 繪出有著對接端點的紫色線段 ()。 (50, 150)。 (300, 150)。 = 30。 = FF00FF。 = butt。 ()。 } else { (39。my_canvas39。). = 39。none39。 (39。nocanvas39。). = 39。block39。 } }。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 19/22 頁 19 /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 /p /section /body /html （ 2）執(zhí)行的結(jié)果 線段的連接風(fēng)格 （ 1） Canvas 對象中的 lineJoin 屬性設(shè)置線段的連接風(fēng)格 可以 有三種連接方式：尖角（ miter），圓角（ round）或斜角（ bevel）。 （ 2）改變線段的連接風(fēng)格示例 var canvas = (canvas ID)。 var context = (2d)。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 20/22 頁 20 =4。 =round。 = 39。66330039。 上面示例是將 lineJoin 屬性設(shè)置成round，這是修改當(dāng)前線段連接方式，讓拐角變得更圓滑，也可以把 lineJoin 屬性設(shè)置成 round （圓角）、 bevel（斜角） 和 miter（尖角）。 繪制矩形相關(guān)的各個函數(shù) 矩形是可以直接使用相關(guān)的 API 函數(shù)繪出，而其他的圖形都需要通過路徑來構(gòu)造。 （ 1） fillRect(x,y,width,height) 該函數(shù)繪制一個有填充（實心）的矩形 —— 以缺省的黑色為填充色的矩形，可以改變填充色和填充方式。 （ 2） rect(in float x, in float y, in float w, in float h) 該函數(shù)繪制一個矩形路徑，通過參數(shù)指定左上角位置以及寬和高。在調(diào)用 rect 函數(shù)后，Context 的繪制起點會移動到 rect 函數(shù)繪制的矩形的左上角。 （ 3） strokeRect(x,y,width,height) 該方法繪制一個矩形的外邊框 （ 4） clearRect(x,y,width,height) 該方法清空指定的區(qū)域，使之變得完全透明。要清除 Canvas 的繪圖區(qū)域上的所有圖形內(nèi)容時，可以直接調(diào)用 (0, 0, width, height)函 數(shù)實現(xiàn)直接清除，而不需要使用路徑方法繪制一個與 Canvas 同等大小的矩形路徑再使用 fill 函數(shù)去清除的方式，這樣的實現(xiàn)比較復(fù)雜。 對于這三個函數(shù)中的每個函數(shù)來說，參數(shù)中的 x 和 y 值表示的都是畫布上相對于矩形左上角的坐標(biāo)位置，而 width 和 height 分別是矩形的寬度和高度。 繪制矩形的示例 （ 1）頁面示例 !DOCTYPE HTML 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 21/22 頁 21 html head meta equiv=ContentType content=text/html。 charset=gb18030 titleHTML5 的 2D Canvas 示例頁面 /title script type=text/javascript language= = function() { var canvas = (39。my_canvas39。)。 if() { var context = (2d)。 (25,25,50,50)。 (35,35,30,30)。 (100,100,50,50)。 } else { (39。my_canvas39。). = 39。none39。 (39。nocanvas39。). = 39。block39。 } }。 /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 頁 22 /p /section /body /html （ 2）執(zhí)行的結(jié)果 1繪制多邊形 由于在 Canvas 對象中的原生支持的基本幾何圖形只有矩形一種，如果需要畫其它的多邊形等圖形，則都需要由路徑來負責(zé)繪制 實現(xiàn) ——因為在 API 中并沒有直接提供畫特定的多邊形的函數(shù)。
高考資料相關(guān)推薦
鄂ICP備17016276號-1