-
1、位圖（BMP, PNG, JPG等）基于顏色的描述
2、矢量圖（SVGm AI等） 基于數(shù)據(jù)的描述查看全部 -
現(xiàn)在很少人看到其中價(jià)值查看全部
-
svg 需要使用 document.createElementNS 創(chuàng)建
查看全部 -
基本操作API
--創(chuàng)建圖形
document.createElementNS(ns, tagName)
--添加圖形
element.appendChild(childrenElement)
--設(shè)置/獲取屬性
element.setAttribute(name, value)
element.getAttribute(name)
查看全部 -
基本圖形和屬性
·基本圖形
<rect>矩形
<circle>圓形
<ellipse>橢圓
<line>直線
<polyline>折線
<polygon>多邊形
補(bǔ)充：
<path>可以繪制任意圖形
·基本屬性
fill
stroke
stroke-width
transform
查看全部 -
坐標(biāo)系的關(guān)系
查看全部 -
求path長(zhǎng)度可參考svg庫(kù)---Raphael?
Raphael?是一個(gè)用 JavaScript 實(shí)現(xiàn)的強(qiáng)大的矢量圖形庫(kù)
查看全部 -
path：路徑，是強(qiáng)大的繪圖工具，可以繪制任意的幾何圖形
10個(gè)命令，包含：
一個(gè)移動(dòng)命令M/m（x,y），
一個(gè)閉合命令Z/z；
3個(gè)直線命令：L/l(x,y),? ?H,/h,Vv(x)；
4個(gè)貝塞爾曲線命令C/c(x1,y1 x2,y2,x,y), S/s(x2,y2,x,y),Q/q(x1,y1,x,y),T/t(x,y)；
一個(gè)弧線命令A(yù)/a(rx,ry,xr,laf,sf,x,y)
查看全部 -
漸變
gradientUnits="userSpaceOnUse",用的是世界坐標(biāo)系，不是當(dāng)前的坐標(biāo)系，完全是橙色，0，0到1，1延續(xù)的顏色都將是最后一個(gè)顏色
徑向漸變
需要多定義一個(gè)參數(shù)r，fx，fy
例子
cx，cy表示漸變開(kāi)始的地方
r表示漸變的長(zhǎng)度
fx，fy表示焦點(diǎn)的位置，顏色出發(fā)的位置
?
查看全部 -
平移
x、y都進(jìn)行了2倍的縮放
順序影響效果
記：如果在viewbox中?0.5的偏移，那么下面的坐標(biāo)，如果是對(duì)齊到整數(shù)的話，那坐標(biāo)是比較銳利的
查看全部 -
矩形自身帶了坐標(biāo)系
矩形坐標(biāo)系相對(duì)于它的前驅(qū)坐標(biāo)系發(fā)生了變化
----------------------------------------------------
世界坐標(biāo)系是0A,
元素B它的前驅(qū)坐標(biāo)系是0A,因?yàn)锳是B的容器
C\D它的前驅(qū)坐標(biāo)系是OB，C\D的容器是ob
ob是分組b的自身坐標(biāo)系
參考坐標(biāo)系：觀察圖像某一個(gè)情況
查看全部 -
svg的坐標(biāo)系中y的方向是與數(shù)學(xué)中的坐標(biāo)系相反的方向，角度是順時(shí)針的方向?yàn)檎较颍D(zhuǎn)的方向是從x軸的正方向向y軸的正方向?yàn)檎?/p>
查看全部 -
視野視窗世界傻傻搞不清楚
?
查看全部 -
建立靈活可拓展的代碼
如：圖形及對(duì)應(yīng)默認(rèn)屬性這種形式，自己建立一個(gè)規(guī)則，需要加新圖形時(shí)候就在后面?一行，不需要重新建立函數(shù)，考慮用公共的方法，而不是每一個(gè)都建立函數(shù)
基本操作的api必須牢記
查看全部 -
基本參數(shù)
查看全部 -
命令匯總
查看全部 -
居中查看全部 -
document.createElementNS(ns,tagName)創(chuàng)建圖形 element.appendChild(childElement)添加圖形 element.setAttribute(name,value)設(shè)置屬性 element.getAtribute（name）獲取屬性
查看全部 -
<text><tspan>?兩個(gè)基本文本標(biāo)簽
查看全部 -
考試，怎樣做的像你剛才那種慕課網(wǎng)頁(yè)的拖拉效果，外框變小，整體圖形文字變??？查看全部
-
圖形分組：<g>
查看全部 -
動(dòng)畫(huà)原理。
查看全部 -
在路徑文本中
text-anchor --控制文字的對(duì)齊方式 作用text標(biāo)簽
startOffset --控制文字在path對(duì)齊的位置，作用于textspan標(biāo)簽
查看全部
舉報(bào)