通過代碼示例跟我學(xué)html5相關(guān)技術(shù)——html5中的canvas標(biāo)簽及應(yīng)用實(shí)例第1部分(參考版)
2024-11-18 07:40本頁面
【正文】 /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 對象中的原生支持的基本幾何圖形只有矩形一種，如果需要畫其它的多邊形等圖形，則都需要由路徑來負(fù)責(zé)繪制 實(shí)現(xiàn) ——因?yàn)樵?API 中并沒有直接提供畫特定的多邊形的函數(shù)。block39。nocanvas39。none39。my_canvas39。 (100,100,50,50)。 (25,25,50,50)。)。 charset=gb18030 titleHTML5 的 2D Canvas 示例頁面 /title script type=text/javascript language= = function() { var canvas = (39。 對于這三個函數(shù)中的每個函數(shù)來說，參數(shù)中的 x 和 y 值表示的都是畫布上相對于矩形左上角的坐標(biāo)位置，而 width 和 height 分別是矩形的寬度和高度。 （ 3） strokeRect(x,y,width,height) 該方法繪制一個矩形的外邊框 （ 4） clearRect(x,y,width,height) 該方法清空指定的區(qū)域，使之變得完全透明。 （ 2） rect(in float x, in float y, in float w, in float h) 該函數(shù)繪制一個矩形路徑，通過參數(shù)指定左上角位置以及寬和高。 繪制矩形相關(guān)的各個函數(shù) 矩形是可以直接使用相關(guān)的 API 函數(shù)繪出，而其他的圖形都需要通過路徑來構(gòu)造。66330039。 =round。 var context = (2d)。 楊教授工作室 精心創(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）。block39。nocanvas39。none39。my_canvas39。 ()。 = FF00FF。 (300, 150)。 // 繪出有著對接端點(diǎn)的紫色線段 ()。 = square。 = 20。 (50, 100)。 ()。 = 0000FF。 (300,50)。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 18/22 頁 18 // 繪出有著圓形端點(diǎn)的藍(lán)色線段 ()。)。 charset=gb18030 titleHTML5 的 2D Canvas 示例頁面 /title script type=text/javascript language= = function() { var canvas = (39。 例如，一個長度為 200 像素，寬度為 10像素，有著圓形或是方形線帽風(fēng)格的線段，其最終的線段長度是 210 像素，因?yàn)槊總€線帽都都往線段的每一端加上了 5 個像素的長度；而一個長度為 200 像素，寬度為 20 像素，有著圓形或是方形的線帽風(fēng)格的線段的最終長度是 220 像素，因?yàn)槊總€線帽都往線段每一端加上了 10 像素的長度。目前 Canvas 對象中的線段主要支持對接（ butt）線帽（它是默認(rèn)值）、圓形（ round）和方形（ square）三種線帽風(fēng)格。 } } /script /head body onload=loadCanvas()。). = 39。 (39。). = 39。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 16/22 頁 16 } else { (39。f0039。 (100,200)。 (100,100)。 //該屬性把端點(diǎn)設(shè)成是圓弧狀的 ()。 //該屬性是線段的寬度 = 0000FF。 //該方法把線路的起點(diǎn)置于（ x=50, y=50） (300,50)。 ()。2d39。)。 charset=gb18030 titleHTML5 的 2D Canvas 示例頁面 /title script function loadCanvas() { var canvas = (39。 （ 2） strokeStyle 屬性 strokeStyle 屬性改變線段的顏色。因此 moveTo 還是 lineTo 只是在定義路徑的位置而不真正產(chǎn)生繪制的效果。但要注意的是，不管調(diào)用上面的 moveTo 還是 lineTo 中的任何一個函數(shù)，都不會真正畫出圖形的線條線 —— 因?yàn)樗鼈兤鋵?shí)只是創(chuàng)建出“繪制路徑”。 （ 3） lineTo(x,y)函數(shù) 繪制線條到指定的目標(biāo)坐標(biāo) (x,y)，而起始坐標(biāo)為前面的 moveTo()函數(shù)所指定的坐標(biāo)位置或者為上一個路徑的終點(diǎn)，它將會在起始和終 止的兩個坐標(biāo)之間畫一條直線（但此時還看不見此線段，目前還是虛擬的不可見的線段，因?yàn)?lineTo 與前面的 moveTo 一樣也
高考資料相關(guān)推薦
鄂ICP備17016276號-1