html5:canvas教程

html5:canvas教程

ID:11133670

大?。?4.10 KB

頁數(shù):81頁

時間:2018-07-10

html5:canvas教程_第1頁
html5:canvas教程_第2頁
html5:canvas教程_第3頁
html5:canvas教程_第4頁
html5:canvas教程_第5頁
資源描述:

《html5:canvas教程》由會員上傳分享,免費(fèi)在線閱讀,更多相關(guān)內(nèi)容在學(xué)術(shù)論文-天天文庫。

1、canvas變換變換操作并不限于縮放和平移,我們可以使用函數(shù)context.rotate(angle)來旋轉(zhuǎn)圖像,甚至可以直接修改底層變換矩陣以完成一些高級操作,如剪裁圖像的繪制路徑。如:context.rotate(1.57),旋轉(zhuǎn)角度參數(shù)以弧度為單位。beginPath():開始moveTo(x,y):起點(diǎn)坐標(biāo)lineTo(x,y):目標(biāo)坐標(biāo)closePath():連接起點(diǎn),閉合路徑translate():移動rotate():旋轉(zhuǎn)restore():恢復(fù)scale():縮放save():保存rotate(angle):旋轉(zhuǎn)圖像q

2、uadraticCurveTo():繪制曲線stroke():繪制strokeText():描繪文本輪廓strokeStyle():顏色設(shè)置strokeRect():使用當(dāng)前的storkestyle來繪制一個矩形,而只繪制矩形的邊緣。fill:填充fillRect():繪制一個矩形,并以當(dāng)前的fillStyle來填充fillStyle():樣式填充fillText:填充文本內(nèi)容drawIamge():圖片填充createPattern():使用背景圖片填充addColorStop():漸變填充createRadialGradient(

3、):放射性漸變clearRect():清除指定矩形區(qū)域的像素.lineCap(butt

4、square

5、round):指定線條末端的樣式.fillStyle:設(shè)置為CSS顏色、一個圖案或一種顏色漸變.lineWidth:線條寬度設(shè)置.lineJoin(round):修改當(dāng)前形狀中線段的連接方式,讓拐角變得更圓滑.shadowColor:任何css中的顏色值,可以使用透明度(alpha).shadowOffsetX:像素值,值為正數(shù),向右移動陰影;值為負(fù)數(shù),向左移動陰影.shadowOffsetY:像素值,值為正數(shù),向下移動陰影;值為負(fù)數(shù)

6、,向上移動陰影.shadowBlur:高斯模糊值,值越大,陰影越模糊HTML5資料1Canvas教程是一個新的用于通過腳本(通常是JavaScript)繪圖的HTML元素。例如,他可以用于繪圖、制作圖片的組合或者簡單的動畫(當(dāng)然并不那么簡單)。Itcanforinstancebeusedtodrawgraphs,makephotocompositionsordosimple(andnotsosimple)animations.1.1基本用法Basicusage?元素Let'sstartthistutor

7、ialbylookingattheelementitself.?讓我們從元素的定義開始吧。Thislooksalotliketheelement,theonlydifferenceisthatitdoesn'thavethesrcandaltattributes.看起來很像,唯一不同就是它不含src和alt屬性。Theelementhasonlyt

8、woattributes-widthandheight.ThesearebothoptionalandcanalsobesetusingDOMpropertiesorCSSrules.它只有兩個屬性,width和height,兩個都是可選的,并且都可以DOM或者CSS來設(shè)置。Whennowidthandheightattributesarespecified,thecanvaswillinitiallybe300pixelswideand150pixelshigh.如果不指定width和height,默認(rèn)的是寬300像素,高150像素

9、。TheelementcanbesizedarbitrarilybyCSS,butduringrenderingtheimageisscaledtofititslayoutsize.??(Ifyour?renderingsseemdistorted,tryspecifyingyourwidthandheightattributesexplicitlyintheattributes,andnotwithCSS.)雖然可以通過CSS來調(diào)整canvas的大小,但渲染圖像會縮放來適應(yīng)布局的(如果你發(fā)現(xiàn)渲染結(jié)果看上去變形了,不必

10、一味依賴CSS,可以嘗試顯式指定canvas的width和height屬性值)。Theidattributeisn'tspecifictotheelementbutisoneofdefaultHTMLat

當(dāng)前文檔最多預(yù)覽五頁,下載文檔查看全文

此文檔下載收益歸作者所有

當(dāng)前文檔最多預(yù)覽五頁,下載文檔查看全文
溫馨提示:
1. 部分包含數(shù)學(xué)公式或PPT動畫的文件,查看預(yù)覽時可能會顯示錯亂或異常,文件下載后無此問題,請放心下載。
2. 本文檔由用戶上傳,版權(quán)歸屬用戶,天天文庫負(fù)責(zé)整理代發(fā)布。如果您對本文檔版權(quán)有爭議請及時聯(lián)系客服。
3. 下載前請仔細(xì)閱讀文檔內(nèi)容,確認(rèn)文檔內(nèi)容符合您的需求后進(jìn)行下載,若出現(xiàn)內(nèi)容與標(biāo)題不符可向本站投訴處理。
4. 下載文檔時可能由于網(wǎng)絡(luò)波動等原因無法下載或下載錯誤,付費(fèi)完成后未能成功下載的用戶請聯(lián)系客服處理。