html自學教程(八)html5基礎

  • 時間:2018-07-01 23:35 作者:極客饕餮 來源:極客饕餮 閱讀:318
  • 掃一掃,手機訪問
摘要:一 html5 SVG動畫&路徑SVG動畫能用元素創立實例:創立一個矩形,將在3秒內更改其位置,而后重復動畫兩次attributeName:指定哪個屬性需要產生動畫效果from:指定屬性的起始值to:指定屬性的結束值dur:指定動畫運行的時間(持續時間)fill="frezee|remove
html自學教程(八)html5基礎

一 html5 SVG動畫&路徑

SVG動畫能用元素創立

實例:

創立一個矩形,將在3秒內更改其位置,而后重復動畫兩次

attributeName:指定哪個屬性需要產生動畫效果

from:指定屬性的起始值

to:指定屬性的結束值

dur:指定動畫運行的時間(持續時間)

fill="frezee|remove":指定動畫播放完畢后是停留在播放的終點還是回到起始位置

repeatCount:指定動畫的重復播放次數

在上面的例子中,矩形在3s內將其x屬性從0更改為300

●要無限重復動畫,請用值"indefinite"作為repeatCount屬性

元素使用于定義一個路徑

下面的命令可使用于路徑數據:

●M=moveto

●L=lineto

●H=horizontal lineto

●V=vertical lineto

●C=curveto

●S=smooth curveto

●Q=quadratic Bezier curve

●T=smooth quadratic Bezier curveto

●A=elliptical Arc

●Z=closepath

注意:以上所有命令均允許小寫字母.大寫字母表示絕對定位,小寫字母表示相對定位

實例:

上面的例子中定義了一條路徑,它開始于150 0,到達位置75 200,而后從那里開始到225 200,最后150 0關閉路徑

二 html5 Canvas

html5元素使用于圖形的繪制,通過腳本(通常是JavaScript)來完成

標簽只是圖描述器,你必需用腳原本繪制圖形

getContext()方法可返回一個對象,該方法提供了使用于在畫布上繪畫的方法和屬性.

你能通過多種方法用canvas繪制路徑,盒,圓,字符以及增加圖像

元素定義如下:

標簽通常需要指定一個id屬性(腳本中經常用),width和height屬性定義的畫布的大小

理解和用Canvas需要基本理解JavaScript的基本知識

canvas是一個二維坐標

canvas的左上角坐標為(0,0)

x坐標向右添加

y坐標向著畫布底部添加

Canvas-路徑

在Canvas上畫線,我們將用以下兩種方法:

●moveTo(x,y)定義線條開始坐標

●lineTo(x,y)定義線條結束坐標

在canvas中繪制圓形,我們將用以下方法:

●arc(x,y,start,stop)

Canvas-文本

用canvas繪制文本,重要的屬性和方法如下:

●font-定義字體

●fillText(text,x,y)-在canvas上繪制實心的文本

●strokeText(text,x,y)-在canvas上繪制空心的文本

Canvas-漸變

漸變能填充在矩形,圓形,線條,文本等等,各種形狀能自己定義不同的顏色

以下有兩種不同的方式來設置canvas漸變:

●creatLinearGradient(x,y,x1,y1)-創立線條漸變

●creatRadialGradient(x,y,r,x1,y1,r1)-創立一個徑向/圓漸變

當我們用漸變對象,必需用兩種或者兩種以上的中止顏色

addColorStop()方法指定顏色中止,參數用坐標形容,能是0至1

用漸變,設置fillStyle或者strokeStyle的值為漸變,而后繪制形狀,如矩形,文本,或者一條線

Canva-圖像

把一幅圖像放置在畫布上,用以下方法:

●drawImage(image,x,y)

三 html5 SVG與Canvas的區別

SVG:

SVG是一種用XML形容2D圖形的語言

SVG基于XML,這意味著SVG DOM中的每個元素都是可使用的.你能為某個元素附加JavaScript事件解決器

在SVG中,每個被繪制的圖形均被視為對象.假如SVG對象的屬性發生改變,那么瀏覽器可以夠自動重現圖形

特點:

●不依賴分辨率

●支持事件解決器

●最適合帶有大型渲染區域的應使用程序(比方谷歌地圖)

●復雜程度高會減慢渲染速度(任何過度用DOM的應使用都不快)

●不適合游戲應使用

Canvas:

canvas通過JavaScript來繪制2D圖形

canvas能逐像素進行渲染的

在canvas中,一旦圖形被繪制出來,它就不會繼續得到瀏覽器的關注

假如其位置發生變化,那么整個場景也需要重新啟動,包括任何或者許已被圖像覆蓋的對象

特點:

●依賴分辨率

●不支持事件解決器

●弱的文本渲染可以力

●可以夠以.png或者.ipg格式保存結果圖像

●最適合圖像密集型的游戲,其中的許多對象都會被頻換重繪

  • 全部評論(0)
最新發布的資訊信息
【系統環境|軟件環境】Android | App內存優化 之 內存泄漏 要點概述 以及 處理實戰(2019-12-04 14:27)
【系統環境|軟件環境】MySQL InnoDB 事務(2019-12-04 14:26)
【系統環境|軟件環境】vue-router(單頁面應用控制中心)常見用法(2019-12-04 14:26)
【系統環境|軟件環境】Linux中的Kill命令(2019-12-04 14:26)
【系統環境|軟件環境】Linux 入門時必學60個文件解決命令(2019-12-04 14:26)
【系統環境|軟件環境】更新版ThreeJS 3D粒子波浪動畫(2019-12-04 14:26)
【系統環境|軟件環境】前臺開發WebStorm常用快捷鍵,火速收藏!(2019-12-04 14:25)
【系統環境|軟件環境】微博H5登錄和發微博組件(2019-12-04 14:25)
【系統環境|軟件環境】5分鐘談前臺面試,小伙伴都驚呆了(2019-12-04 14:23)
【系統環境|軟件環境】node中的path模塊(2019-12-04 14:23)
手機二維碼手機訪問領取大禮包
返回頂部
3d开机号查询