初识VML
初識VML
準備使用VML前：
1.加個xmlns
<html xmlns:v="urn:schemas-microsoft-com:vml">
2.加個樣式
<style>
v\:* { behavior: url(#default#VML); position:absolute }
</style>
基本圖形
line 線條
<v:line from='100,100' to='400,300' strokeColor='red' strokeWeight='20'></v:line> 屬性樣式 from : 起點坐標 to : 終點坐標 strokeColor: 線條顏色 strokeWeight : 線條寬度oval 橢圓
<v:oval style='left:100px;top:100px;width:400px;height:400px;display:block;'></v:oval> <v:oval style='left:100px;top:100px;width:400px;height:400px;position:absolute;'></v:oval> 自定義標簽默認是行內標簽，需要添加 display:block; 使用position:absolute;定位顯示圖形，則可省去定義display:block;rect 矩形
<v:rect style='left:100px;top:100px;width:400px;height:400px;display:block;'></v:rect> <v:rect style='left:100px;top:100px;width:400px;height:400px;position:absolute;'></v:rect> 用法和oval類似shape
<v:shape style='width:1000px;height:1000px;' coordsize='1000,1000' path="M 200,100 L 100,400 300,400 X"></v:shape>VML中使用的坐標并不是Document的坐標 coordSize='coordSizeX, coordSizeY'; 定義坐標 style='width:coordSizeX px; height:coordSizeY px;' style里的width height 和coordSize里的值對應，才能顯示圖形正常樣式 fillColor : 填充顏色 path 屬性： M x,y 畫筆起點位置 L (x,y)+ 畫以一條線 也可連續多個點畫線 X 結束demo
<!DOCTYPE html> <html xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta charset="utf-8"> <title></title> <style media="screen">v:* { behavior: url(#default#VML); position:absolute;} </style> </head> <body> <v:shape style='width:1px;height:1px;' coordsize='1,1' path="M 200,100 L 100,400 300,400 X" fillColor='red';></v:shape> </body> </html>
總結
- 上一篇： angular中运用防抖功能
- 下一篇： Angular入门到精通系列教程（14）