SVG 基本內容 SVG並不屬於HTML5專有內容 HTML5提供有關SVG原生的內容 在HTML5出現之前,就有SVG內容 SVG,簡單來說就是矢量圖 SVG文件的擴展名為".svg" SVG使用的是XML語法 概念 SVG是一種使用XML技術描述二維圖形的語言 SVG的特點 SVG繪製圖形可以被
SVG
基本內容
SVG並不屬於HTML5專有內容
HTML5提供有關SVG原生的內容
在HTML5出現之前,就有SVG內容
SVG,簡單來說就是矢量圖
SVG文件的擴展名為".svg"
SVG使用的是XML語法
概念
SVG是一種使用XML技術描述二維圖形的語言
SVG的特點
SVG繪製圖形可以被搜索引擎抓取
SVG在圖片質量不下降的情況下,被放大
SVG與Canvas的區別
SVG
不依賴解析度
支持事件綁定
大型渲染區域的程式(例如百度地圖)
不能用來實現網頁游戲
Canvas
依賴解析度
不支持事件綁定
最合適網頁游戲
保存為".jpg"格式的圖片
用途
網頁中一些小的圖標
網頁中動態特效(動畫效果)
HTML5中使用SVG
使用<svg></svg>元素
作用 - 類似於<canvas>元素
預設大小為300px 150px
使用CSS樣式
使用SVG繪製圖形,必須定義<svg>元素中
繪製圖形
矩形元素
<rect x="" y="" width="" height="" />
圓形元素
<circle cx="" cy="" r="" />
橢圓元素
<ellipse cx="" cy="" rx="" ry="">
直線元素
<line x1="" y1="" x2="" y2="" />
折線元素
<polyline points="">
多邊形元素
<polygon points="" />
特效元素
漸變 - 漸變元素定義在<defs>元素內
線型漸變 - <linearGradient>
該元素是起始元素
<linearGradient x1="%" y1="%" x2="%" y2="%">
<stop offset="%" stop-color="color" />
</linearGradient>
扇形(射線)漸變 - <radialGradient>
濾鏡 - 高斯模糊
濾鏡使用<filter>元素
<feGaussianBlur>元素 - 高斯模糊
in="SourceGraphic"
stdDeviation - 設置模糊程度
註意 - 定義在<defs>元素中
TWO.js
基本內容
JS庫介紹
three.js - 專門用於繪製三維圖形
two.js - 專門用於繪製二維圖形
two.js支持的格式
SVG - 預設
Canvas
WebGL - 專門用於繪製圖像
如何使用two.js
在HTML頁面中引入two.js文件
在HTML頁面中定義容器(<div>)
在javascript代碼中
獲取HTML頁面中的容器
創建Two對象,將該對象添加到容器中
new Two(params).appendTo(Element);
使用two.js提供的API方法進行繪製
利用two.js提供的方法,設置圖形
利用update()方法進行繪製
創建Two對象
構造器 - new Two(params)
params參數 - 設置當前對象的信息
type - 設置當前使用的格式(Two.Types.svg)
svg - 預設值
canvas
webgl
width和height - 設置寬度和高度
fullscreen - 設置是否全屏
Boolean值,true表示全屏
圖形方法
makeLine() - 繪製線條
makeRectangle() - 繪製矩形
makeCircle() - 繪製圓形
makeEllipse() - 繪製橢圓
動畫方法
update() - 更新動畫
play() - 添加動畫(迴圈)
pause() - 刪除動畫
設置繪製圖形的樣式
調用Two對象的繪製方法繪製圖形時,返回該圖形對象
通過該圖形對象,設置相關屬性值
分組操作
Two.Group
動畫效果
bind(event,callback)方法 - 事件綁定
event - 綁定事件名稱
update - 對應update()方法的作用
所有的DOM事件都可以綁定
callback - 事件處理函數
