通過(guò)代碼示例跟我學(xué)html5相關(guān)技術(shù)——html5中的canvas標(biāo)簽及應(yīng)用實(shí)例（第2部分(文件)
【正文】 /* 獲取文字寬度 */ var tm1 = (txt)。 /* 重新獲取文字寬度 */ 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 17/25 頁(yè) 17 var tm2 = (txt)。my_canvas39。nocanvas39。 /script /head body section canvas id=my_canvas width=600 height=500/canvas div id=nocanvas style=display:none你的瀏覽器不支持 2D Canvas 相關(guān)的技術(shù) /div /section /body /html （ 2）執(zhí)行后的結(jié)果 將當(dāng)前 Canvas 里的內(nèi)容導(dǎo)出成圖片數(shù)據(jù) 示例 toDataURL(type, args? )方法實(shí)現(xiàn)將當(dāng)前 Canvas 中的圖像數(shù)據(jù)導(dǎo)出成圖片數(shù)據(jù) 應(yīng)用該方法能夠?qū)崿F(xiàn)將畫板中的內(nèi)容保存為圖片，所導(dǎo)出的圖片數(shù)據(jù)結(jié)果其實(shí)是一個(gè)以“ data:”開頭的字符串，它們是圖片的像素?cái)?shù)據(jù)。 示例代碼 !DOCTYPE HTML html head meta equiv=ContentType content=text/html。 if() { var context = (2d)。 (10, 20, 50, 50)。). = 39。). = 39。 （ 2） translate(x, y)函數(shù) 其中的 (x,y)坐標(biāo)參數(shù)指明了圖像在 x 方向（左右偏移量）和 y 方向（上下偏移量）上應(yīng)該移動(dòng)的像素?cái)?shù) —— 比如，如果使用 (20,30)作為參數(shù)的來(lái)調(diào)用 translate()函數(shù)，然后再使用drawImage()函數(shù)在 (15,25)位置處繪制一個(gè)圖像，最終該調(diào)用將把圖像放在 (15+20, 25+30) = (35, 55)這一坐標(biāo)位置上。 如果值比 小，則表示縮?。欢等绻O(shè)置的比 大，則表示放大處理；值為 時(shí)，不產(chǎn)生變化 —— 什么效果都沒有。 3) 順時(shí)針旋轉(zhuǎn) 45 度， ()。my_canvas39。 var rectHeight = 75。 =blue。 =center。my_canvas39。nocanvas39。 /script /head body 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）執(zhí)行的結(jié)果 平移轉(zhuǎn)換處理的應(yīng)用示例 （ 1）示例代碼 !DOCTYPE HTML html head meta equiv=ContentType content=text/html。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 22/25 頁(yè) 22 if() { var context = (2d)。 i。 (50, 100, 100, 0, , true)。). = 39。). = 39。 charset=gb18030 titleHTML5 的 2D Canvas 示例頁(yè)面 /title script type=text/javascript language= = function() { var canvas = (39。 (150,150)。00f39。 // 保持開始繪制每一層時(shí)的狀態(tài)一致 for (j=0。 (0,60*i,25,0,*2,true)。my_canvas39。nocanvas39。 /script /head body section header h12D Canvas section 示例 /h1 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 25/25 頁(yè) 25 /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 。block39。none39。 // 使用 fillType 值填充每個(gè)實(shí)心圓 } ()。j++){ // 每層生成實(shí)心圓的數(shù)量 ((3*i))。f0039。i=2。)。 } }。 (39。 } } else { (39。 /* 設(shè)定顏色 */ = colors[i]。 /* 定義線寬 */ = 10。my_canvas39。block39。none39。 (Mirror Image,3,10)。 // 水平方向翻轉(zhuǎn) context (1,1)。 // y 方向的組成減半 (1,)。 if() { var context = (2d)。 （ 2）示例頁(yè)面 !DOCTYPE HTML html head meta equiv=ContentType content=text/html。 實(shí)現(xiàn)各種效果的示例片段代碼 （ 1）實(shí)現(xiàn)的基本思路 1) 把 context 平移到畫布的中心， (,)。例如， scale(, .75)將創(chuàng)建一個(gè)在 x 方向加大 50%，而在 y 方向只相當(dāng)于當(dāng)前尺寸 75%的圖像。 } }。 (39。 } else { (39。 (0, 0, , )。my_canvas39。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 18/25 頁(yè) 18 其中的第 1 個(gè)參數(shù) type 是導(dǎo)出的 MIME 類型字符串，比如“ image/jpeg”、“ image/png”、“ image/svg+xml”。block39。none39。 (,+10, 70)。 (, +10, 30)。italic 20px sansserif39。my_canvas39。 } }。 (39。 } else { (39。 = 10。99660039。 if() { var context = (2d)。 屬性 值 備注 shadowColor 陰影的顏色 值 可以使用透明度 shadowOffsetX 橫向位移量 像素值 ，設(shè)置為 10表明陰影會(huì)出現(xiàn)在原圖形右邊，最多 10 像素 X方向便宜 shadowOffse
環(huán)評(píng)公示相關(guān)推薦
鄂ICP備17016276號(hào)-1