H5中canvas和svg绘图方式介绍
在HTML5中包括了兩種繪圖方式，canvas和svg（矢量呈現(xiàn)），而與canvas不同的是，svg是一種XML標(biāo)記語(yǔ)言，它既可以單獨(dú)保存以“.svg”為后綴的文件在瀏覽器中打開(kāi)顯示，也支持建立svg標(biāo)簽直接嵌入在網(wǎng)頁(yè)中顯示，還可以通過(guò)<embed src="文件.svg" name="name自命" type="image/svg+xml" height="300" width="450">將SVG嵌入到頁(yè)面中，和Canvas一樣也可以響應(yīng)腳本事件操作和控制。
svg的形狀shapes：rect/矩形(方形) 、circle/圓形、ellipse/橢圓、line/線、polyline/多邊交叉線和polygone/多邊形可以使用，當(dāng)然還有image；
其中，（1）在rect中有如下屬性：x/y（矩形左上角坐標(biāo)），width/height（矩形寬高），rx/ry（矩形的角弧度；最大值為寬高的一半，而且當(dāng)矩形為正方形切最大值時(shí)圖形為圓形），fill（圖形填充色），stroke/stroke-width（圖形邊框/邊框?qū)挾?#xff1b;默認(rèn)為1px）；（2）在circle中則有如下屬性：cx/cy（圓形圓點(diǎn)坐標(biāo)）、r（圓形半徑）、fill、stroke/stroke-width；（3）在ellipse中則有如下屬性：cx/cy、rx/ry（橢圓X軸/Y軸的半徑）、fill、stroke/stroke-width；（4）在line中則有如下屬性：stroke/stroke-width（線的顏色/寬度）、x1/y1(直線起點(diǎn)坐標(biāo))、x2/y2(直線終點(diǎn)坐標(biāo))；（5）在polyline中則有如下屬性：stroke/stroke-width（線的顏色/寬度）、points（x1,y1 x2,y2 x3,y3）(起點(diǎn)終點(diǎn)以及各個(gè)轉(zhuǎn)折點(diǎn)的坐標(biāo))；（6）在polygon中有如下屬性stroke/stroke-width（線的顏色/寬度）、points（x1,y1 x2,y2 x3,y3）(起點(diǎn)終點(diǎn)以及各個(gè)轉(zhuǎn)折角的坐標(biāo))；
代碼如下：
<svg width="3000" height="2500" xmlns="http://www.w3.org/2000/svg">
??? <rect x="5" y="50" width="60" height="60" fill="green"/>
??? <rect x="70" y="5" rx="30" ry="30" stroke="blue" width="60" height="60" fill="red"/>
??? <circle? cx="165" cy="35" r="30" fill="orange" stroke="blue"/>
??? <ellipse cx="230" cy="35" rx="30" ry="20" fill="blue"/>
??? <line? y1="222" x1="25" y2="130" x2="100" stroke-width="5" stroke="#ff0000" fill="none"/>
<polygon points="290,100 350,210 270,250" style="fill:#cccccc;stroke:#000000;stroke-width:1"/>
<polyline stroke-width="6" fill="none" stroke="#3f7f00" points="121,193 192,284 121,284 192,193 "/>
??? <image xlink:href="http://4493bz.1985t.com/uploads/allimg/150127/4-15012G52133.jpg"? x="360" y="30" width="100" height="100" />
</svg>
然后，svg在圖形上還有一種按照路徑來(lái)畫(huà)圖形的標(biāo)簽path，其實(shí)path標(biāo)簽是用來(lái)定義路徑的，標(biāo)簽里有個(gè)d="";的屬性，里面的值為路徑坐標(biāo)；以下命令可用于路徑數(shù)據(jù)：M = moveto，L = lineto，H = horizontal lineto，V = vertical lineto，C = curveto，S = smooth curveto，Q = quadratic Belzier curve，T = smooth quadratic Belzier curveto，A = elliptical Arc，Z = closepath；（這些命令均允許大小寫(xiě)，大寫(xiě)表示絕對(duì)定位，小寫(xiě)表示相對(duì)定位）；例如：
?
??? <svg xmlns='http://www.w3.org/1999/svg' version=''>
??????????? <path d="m0,0,10,20,30,20,50,50,200,10z" stroke-width="5" stroke="#000000" fill="#ff7f00" />
??????????? <path d="m263,149 l-9,76 l82,-48 l-123,-13 l50,-15 z" stroke-width="5" stroke="#000000" fill="#ff7f00"/>
??? </svg>
?
另外，svg對(duì)于文字也有不同的效果體現(xiàn)，svg的text標(biāo)簽支持漸變填充，也支持文字拾取曲線排列文字，需要預(yù)先定義漸變填充在<defs></defs>中，當(dāng)文字拾取路徑排列是也需要在<defs></defs>中預(yù)先定義。而text也有自己的一些屬性：x/y(X軸/Y軸起始點(diǎn)坐標(biāo))、dx/dy(X軸/Y軸偏移位置的坐標(biāo))、rotate（旋轉(zhuǎn)偏移的角度）、textLength（元素的長(zhǎng)度，會(huì)影響輸出的寬度）、transform（文字的變形效果，類(lèi)似css中的transform）；代碼如下：
??? <svg width="300" height="250" xmlns="http://www.w3.org/2000/svg">
??????? <defs>
??????????? <linearGradient y2="1" x2="1" y1="0" x1="0" id="svg_8">
??????????????? <stop stop-color="#ff0000" offset="0"/>
??????????????? <stop stop-color="#ffff00" offset="1"/>
??????????? </linearGradient>
??????? </defs>
??????? <text font-weight="bold" font-style="normal" xml:space="preserve"
??? text-anchor="middle" font-family="Arial Black" font-size="24"
??? id="svg_7" y="53" x="107" stroke-width="0" stroke="#000000"
??? fill="url(#svg_8)">weisim3.com</text>
?
??????? <defs>
??????????? <path? d="m220.98885,39.69102c84.91158,149.91641 241.80937,-74.29949 260.99889,5.65374"
??????? fill="black" transform="rotate(-0.474251, 351.488, 60.1133)"
??????? id="fontPath"/>
??????? </defs>
??????? <text fill="url(#svg_8)">
??????????? <textPath xlink:href="#fontPath">
??????????????? www.weisim3.com 22.11.2011 - Html5 SVG
??????????? </textPath>
??????? </text>
??? </svg>
?
svg可以直接支持動(dòng)畫(huà)和鼠標(biāo)觸發(fā)事件，也支持JavaScript腳本響應(yīng)時(shí)間，接下來(lái)會(huì)為大家介紹一下svg的鼠標(biāo)事件和動(dòng)畫(huà)；click事件<set attributeName="fill" to="red" begin="click"/>，在SVG中觸發(fā)click事件，attributeName是類(lèi)型這里fill是指填充，to="red"是點(diǎn)擊之后填充為紅色，attributeName支持visibility、opacity、width等屬性。動(dòng)畫(huà)<animateMotion from="0,260" to="180,100" dur="5s" fill="freeze"/>，這里動(dòng)畫(huà)from="0,260"為平面坐標(biāo)點(diǎn)，x軸為0，y軸為260；to="180,100"則是動(dòng)畫(huà)移動(dòng)到"180,100"位置；dur="5s"為幀速。動(dòng)畫(huà)<animateTransform>為自由變換如圖形旋轉(zhuǎn)、縮放主要用此屬性；代碼如下：
??? <svg width="300" height="250" xmlns="http://www.w3.org/2000/svg">
??????? <circle? cx="60" cy="35" r="30" fill="green">
??????????? <set attributeName="stroke" to="red" begin="click"/>
??????? </circle>
?
??????? <rect x="100" y="10" width="40" height="50" fill="orange">
???????? <animate attributeName="width" dur="5s" from="10px" to="20px"
????????? accumulate="sum" additive="sum" repeatCount="10" begin="click" />
??????? </rect>
?
??????? <rect fill="orange" stroke="red" stroke-width="5px"
???????????? x="0px" y="0px" width="115px" height="115px">
??????????? <animateMotion from="0,260" to="180,100"
???????????? dur="5s" fill="freeze"/>
??????????? </rect>
??? </svg>
?
??? <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
??????? <rect fill="#AFBCC7" stroke="blue" stroke-width="5px" x="200px"
??????? y="100px" width="60px" height="60px">
??????? <animateTransform
??????????? attributeType="XML"
??????????? attributeName="transform"
??????????? type="rotate"
??????????? from="0,150,150" to="360,150,150"
??????????? begin="0s" dur="5s"
??????????? repeatCount="indefinite"/>
??????? </rect>
?
???????? <circle fill="#c5ff86" stroke="#38521d" stroke-width="5px"
????????? cy="37" cx="148" r="30" >
?
??????????? <animateTransform
??????????????? attributeType="XML"
??????????????? attributeName="transform"
??????????????? type="scale"
??????????????? from="0" to="1"
??????????????? dur="5s"
??????????????? fill="freeze"/>
??????? </circle>
??? </svg>
轉(zhuǎn)載于:https://www.cnblogs.com/pycsharpthon/p/9716724.html
總結(jié)
以上是生活随笔為你收集整理的H5中canvas和svg绘图方式介绍的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
