-
SVG動畫
查看全部 -
徑向漸變
radial
查看全部 -
線性漸變linear
查看全部 -
HSL顏色
查看全部 -
<!DOCTYPE?html> <html?lang="en"> <head> ??<meta?charset="UTF-8"> ??<title>sin?text</title> ??<style> ????html,?body,?svg?{ ??????margin:?0; ??????padding:?0; ??????width:?100%; ??????height:?100%; ????} ??</style> </head> <body> <form?> ??<fieldset> ????<legend>參數(shù)設置</legend> ????<label?> ??????振幅：<input?max="150"?min="10"?oninput="h?=?this.value"?type="range"> ????</label> ????<label?> ??????周期：<input?max="10000"?min="1"?oninput="w?=?this.value?/?10000"?type="range"> ????</label> ??</fieldset> </form> <svg?xmlns="http://www.w3.org/2000/svg"> ??<!--網(wǎng)格--> ??<g> ????<defs> ??????<pattern?height="10"?id="grid"?patternContentUnits="userSpaceOnUse" ???????????????patternUnits="userSpaceOnUse"?width="10"?x="0" ???????????????y="0"> ????????<rect?fill="none"?height="10.5"?stroke="#f0f0f0"?stroke-dasharray="2"?stroke-width=".5" ??????????????width="10.5"?x="0" ??????????????y="0"></rect> ??????</pattern> ??????<pattern?height="50"?id="bigGrid"?patternContentUnits="userSpaceOnUse" ???????????????patternUnits="userSpaceOnUse"?width="50"?x="0" ???????????????y="0"> ????????<rect?fill="url(#grid)"?height="50.5"?stroke="#e0e0e0"?stroke-width=".5" ??????????????width="50.5"></rect> ??????</pattern> ????</defs> ????<rect?fill="url(#bigGrid)"?height="100%"?width="100%"?x="0"?y="0"></rect> ??</g> ??<g> ????<text?id="sinText"??x="200"?y="200"></text> ??</g> </svg> <script> ??//?獲取文本對象 ??const?textEle?=?document.getElementById('sinText'); ??//?dx?=?[20,?20,?20,?...] ??//?y?=?λsin(ω?*?x?+?t)，絕對位置 ??//?由于dy屬性是相對于之前文字的位置設置的，相對位置的dy ??//?dy?=?λsin(ω?*?x?+?t)?-?λsin(ω?*?(x-1)?+?t) ??//?由于?正弦函數(shù)具有周期性所有直接?dy?=?λsin(ω?*?x?+?t)?也是可以的 ??const?text?=?'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; ??let?n?=?text.length, ????dxDistance?=?10, ????//?振幅 ????h?=?80, ????//?周期 ????w?=?.02, ????dxArr?=?new?Array(n), ????dyArr?=?new?Array(n); ??const?frg?=?document.createDocumentFragment(); ??for?(let?i?=?0;?i?<?n;?i++)?{ ????dxArr[i]?=?dxDistance; ????//?使用tspan設置每一個字符的單獨顏色 ????const?tspan?=?document.createElementNS('http://www.w3.org/2000/svg',?'tspan'); ????//?不能用這個屬性 ????//?tspan.innerText?=?text[i]; ????tspan.textContent?=?text[i]; ????tspan.setAttribute('fill',?`hsl(${360?*?i?/?n},?100%,?80%)`); ????frg.appendChild(tspan) ??} ??textEle.appendChild(frg); ??//?計算dy數(shù)組 ??const?render?=?(t?=?0)?=>?{ ????//?計算絕對的dy ????const?calcDy?=?x?=>?{ ??????return?~~(h?*?Math.sin(w?*?x?+?t)) ????}; ????for?(let?i?=?0;?i?<?n;?i++)?{ ??????//?dyArr[i]?=?calcDy(dxDistance?*?i) ??????//?計算相對?dy ??????dyArr[i]?=?calcDy(dxDistance?*?i)?-?calcDy(dxDistance?*?(i?-?1)) ????} ????//?設置dy ????textEle.setAttribute('dx',?dxArr.join(',')); ????textEle.setAttribute('dy',?dyArr.join(',')) ??}; ??let?t?=?0; ??const?frame?=?()?=>?{ ????render(t?+=?.02); ????requestAnimationFrame(frame) ??}; ??frame() </script> </body> </html>dy是一個相對參數(shù)，正確的計算應該減去上一個字符的dy
查看全部 -
svg使用方式
查看全部 -
基本操作API
創(chuàng)建圖形
document.createElementNS(ns,tagName)
添加圖形
element.appendChild(childElement)
設置/獲取屬性
element.setAttribute(name,value)
element.getAttribute(name)
查看全部 -
svg 基本圖形和屬性
基本圖形
<rect>? ?矩形
<circle> 圓形
<ellipse> 橢圓
<line> 直線
<polyline> 折線
<polygon> 多邊形
基本屬性
fill 填充顏色、 stroke? 描邊顏色、 stroke-width? 描邊的粗細、transform? ?變形屬性（后期會有詳細介紹）
rect :
?circle:
ellipse:
line:
polyline :
polygon :
查看全部 -
W3C標準：http://www.w3.org/TR/SVG11/
矢量圖和位圖
????????位圖（BMP、PNG、JPG等）? 基于顏色的描述
????????矢量圖（SVG、AI等） 基于數(shù)學的描述
SVG--使用方式
在瀏覽器中直接打開
2.在HTML中使用 <img> 標簽引用
3.直接在HTML中使用 SVG 標簽
4.作為 CSS 背景
查看全部 -
1.1
打開方式：?
? 直接用瀏覽器打開.svg文件
? <image>標簽src屬性引用
? css方式，background設置url(some.svg)
? html標簽中使用<svg></svg>來使用
1.2
<rect>矩形?<circle>圓形?<ellipse>橢圓 <line>線條 <polyline>折線 <polygon>多邊形
<g> <path>
fill strock stroke-width transform
1.3
document.createElementNS(ns, tagName)
element.appendChild(childElement)
element.setAttribute(name, value)
element.getAttribute(name)
1.4
查看全部 -
基本圖形
<rect> x,y,width,height,rx,ry
<circle> cx, cy, r
<ellipse> cx, cy, rx ry
<line> x1,y1,x2,y2
<polyline>points="x1 y1 x2 y2 x3 y3"
<polygon>points="x1 y1 x2 y2 x3 y3"
基本屬性
fill, stroke, stroke-width, transform
查看全部 -
HSL的介紹
查看全部 -
矩形畫圖值
查看全部 -
M(X,Y) 移動畫筆，后面如果有重復參數(shù)，會當做是L命令處理
L（x,y）繪制直線到指定位置
H（x）繪制水平先到指定的x位置
V（y） 繪制直線到指定的y位置
mlhv使用相對位置繪制
查看全部 -
基本操作API
創(chuàng)建圖形：document.createElementNS(ns,tagName);
添加圖形：element.appendChild(childElement)
設置/獲取屬性：
element.setAttribute(name,value)
element.getAttribute(name)
查看全部
舉報