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