真牛！用VML在网页上生成一幅梅花图

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<html xmlns:v>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<title>梅花</title>
<meta name="generator" content="Namo WebEditor">
<style>
v\:*{behavior:url(#default#VML);}
</style>
</head>
<body>
<v:group 
style="POSITION: absolute; WIDTH: 500px; DISPLAY: block; HEIGHT: 400px; TOP: 110px;lEFT: -16px" 
id=Canvas_Data coordsize = "500,400">
<v:shape 
style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: 54px;lEFT: -495px" 
id=CPoly706  n"11"  s"-495" coordsize = 
"300,300"  fillcolor = "maroon" stroked = "f" strokecolor = 
"#ffacd6" path = 
"m830,73l808,73,781,48,767,10,771,-7,731,-6,748,28,748,38,757,64,780,83,802,100 xe"><v:fill 
type = "gradient" color2 = "black"></v:fill></v:shape><v:shape 
style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: 40px;lEFT: -448px" 
id=CPoly786  n"29"  s"-448" coordsize = 
"300,300"  fillcolor = "maroon" stroked = "f" strokecolor = 
"#ffacd6" path = 
"m984,6l898,4,870,43,858,53,835,84,821,87,780,88,757,94,727,134,716,156,694,176,664,207,632,222,604,242,564,270,549,276,535,277,541,329,584,297,625,278,669,275 718,239,758,184,795,161,848,168,863,150,899,109,934,71,984,39 xe"><v:fill 
type = "gradient" color2 = "black"></v:fill></v:shape><v:shape 
style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: 44px;lEFT: -429px" 
id=CPoly366  n"15"  s"-429" coordsize = 
"300,300"  fillcolor = "black" stroked = "f" strokecolor = "#ffacd6" 
path = 
"m692,74l663,90,635,123,616,146,597,193,584,240,578,301,578,396,563,394,562,317,567,263,576,201,597,133,631,91,682,48 xe"><v:fill 
type = "gradientRadial" opacity = "52428f" color2 = 
"maroon"></v:fill></v:shape><v:shape 
style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: -1px;lEFT: 0px" 
id=CBeizer161  n"5"  s="-1" coordsize = "300,300" 
filled = "f" fillcolor = "white" stroked = "f"  path = 
"m398,216 c407,215,431,225,410,235,417,236,403,256,378,241,366,255,357,236,357,236,334,246,333,197,368,221,367,207,392,192,398,216e"></v:shape><v:shape 
style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: -2px;lEFT: -1px" 
id=CPoly630  n"18"  s"-1" s="-2" coordsize = 
"300,300"  fillcolor = "black" strokecolor = "#a52a2a" path = 
"m456,142l456,186,453,222,454,248,444,299,433,309,426,332,408,352,381,360,336,421,367,362,381,348,402,342,416,319,437,273,440,234,437,206,435,168 xe"><v:fill 
type = "gradient" color2 = "maroon"></v:fill></v:shape><v:shape 
style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: 0px;lEFT: 1px" 
id=CPoly642  n"17"  coordsize = "300,300" filled = 
"t" fillcolor = "#a52a2a" strokecolor = "#a52a2a" path = 
"m376,348l362,345,335,337,313,322,308,316,304,294,295,261,292,264,296,279,299,294,303,313,303,321,302,329,314,338,331,351,353,355,368,362 xe"></v:shape><v:shape 
style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: -1px;lEFT: 0px" 
id=CPoly820  n"29"  s="-1" coordsize = "300,300" 
 fillcolor = "#a52a2a" strokecolor = "#a52a2a" path = 
"m303,319l288,303,269,292,268,295,291,315,276,326,267,336,253,347,236,355,226,361,214,362,203,371,189,383,168,406,157,423,150,432,150,437,171,410,194,388,212,374,232,366 272,341,275,341,273,355,266,368,270,367,282,340,292,325,304,329 xe"></v:shape><v:shape 
style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: -1px;lEFT: 0px" 
id=CBeizer186  n"5"  s="-1" coordsize = "300,300" 
 fillcolor = "fuchsia" stroked = "f" strokecolor = "#ffacd6" path = 
"m365,212 c377,202,400,232,378,239,385,262,351,260,345,250,336,271,320,251,322,243,279,233,320,192,334,217,339,172,371,200,365,212e"><v:fill 
type = "gradientRadial" focus = "30%"></v:fill></v:shape><v:shape 
style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: -1px;lEFT: 0px" 
id=CBeizer612  n"5"  s="-1" coordsize = "300,300" 
 fillcolor = "fuchsia" stroked = "f"  path = 
"m294,175 c308,208,279,192,279,192,266,221,256,194,258,192,233,172,262,162,262,162,276,123,288,143,290,147,326,152,301,175,294,175e"><v:fill 
type = "gradient"></v:fill></v:shape><v:shape 
style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: -1px;lEFT: 0px" 
id=CBeizer348  n"5"  s="-1" coordsize = "300,300" 
 fillcolor = "fuchsia" stroked = "f"  path = 
"m173,287 c205,294,183,323,171,312,175,349,152,320,152,320,155,329,131,335,135,309,118,275,145,281,145,283,145,279,173,259,173,287e"><v:fill 
type = "gradientRadial"></v:fill></v:shape><v:shape 
style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: -1px;lEFT: 0px" 
id=CBeizer831  n"5"  s="-1" coordsize = "300,300" 
 fillcolor = "fuchsia" stroked = "f"  path = 
"m233,303 c226,304,255,267,264,305,293,316,270,336,261,330,268,365,243,340,243,340,228,358,223,336,224,329,201,301,231,296,233,303e"><v:fill 
type = "gradient"></v:fill></v:shape><v:shape 
style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: -1px;lEFT: 0px" 
id=CBeizer239  n"5"  s="-1" coordsize = "300,300" 
 fillcolor = "fuchsia" stroked = "f"  path = 
"m345,328 c363,328,374,362,344,360,344,397,326,374,326,374,321,393,306,387,310,363,306,370,284,349,315,327,310,322,338,278,345,328e"><v:fill 
type = "gradient"></v:fill></v:shape><v:shape 
style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: -8px;lEFT: -5px" 
id=CBeizer742  n"3"  s"-5" s="-8" coordsize = 
"300,300"  fillcolor = "fuchsia" stroked = "f"  
path = 
"m197,191 c197,191,182,201,196,215,201,213,199,199,199,199,199,199,197,191,197,191e"><v:fill 
opacity = "13107f"></v:fill></v:shape><v:shape 
style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: -1px;lEFT: 0px" 
id=CBeizer878  n"3"  s="-1" coordsize = "300,300" 
 fillcolor = "fuchsia" stroked = "f"  path = 
"m163,171 c158,171,157,182,157,182,157,182,165,190,171,183,172,175,169,171,163,171e"><v:fill 
opacity = ".5"></v:fill></v:shape><v:shape 
style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: -12px;lEFT: 1px" 
id=CBeizer648  n"3"  s="-12" coordsize = 
"300,300"  fillcolor = "fuchsia" stroked = "f"  
path = 
"m113,210 c105,215,108,230,108,230,115,240,118,230,118,230,125,218,113,210,113,210e"><v:fill 
opacity = "6553f"></v:fill></v:shape><v:shape 
style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: -22px;lEFT: 3px" 
id=CBeizer448  n"3"  s="-22" coordsize = 
"300,300"  fillcolor = "fuchsia" stroked = "f"  
path = 
"m131,255 c119,256,123,273,127,273,128,270,132,265,132,265,136,259,131,255,131,255e"><v:fill 
opacity = "13107f"></v:fill></v:shape><v:shape 
style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: -1px;lEFT: 0px" 
id=CBeizer469  n"3"  s="-1" coordsize = "300,300" 
 fillcolor = "fuchsia" stroked = "f"  path = 
"m309,266 c302,273,304,288,304,288,312,288,312,282,312,282,317,272,309,266,309,266e"><v:fill 
opacity = "6553f"></v:fill></v:shape><v:shape 
style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: 2px;lEFT: 3px" 
id=CBeizer291  n"3"  coordsize = "300,300" filled 
= "t" fillcolor = "fuchsia" stroked = "f"  path = 
"m405,303 c405,303,408,293,417,297,422,305,421,303,419,304,410,319,405,303,405,303e"><v:fill 
opacity = "13107f"></v:fill></v:shape><v:shape 
style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: -1px;lEFT: 0px" 
id=CBeizer93  n"3"  s="-1" coordsize = "300,300" 
 fillcolor = "fuchsia" stroked = "f"  path = 
"m408,356 c416,362,409,379,409,379,409,379,405,379,403,370,401,364,408,356,408,356e"><v:fill 
opacity = "13107f"></v:fill></v:shape><v:shape 
style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: -1px;lEFT: 0px" 
id=CBeizer558  n"3"  s="-1" coordsize = "300,300" 
 fillcolor = "fuchsia" stroked = "f"  path = 
"m335,405 c335,400,327,399,327,399,327,399,321,405,323,410,332,420,338,409,335,405e"><v:fill 
opacity = "13107f"></v:fill></v:shape><v:shape 
style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: -1px;lEFT: 0px" 
id=CBeizer905  n"3"  s="-1" coordsize = "300,300" 
 fillcolor = "fuchsia" stroked = "f"  path = 
"m279,355 c279,355,289,359,281,374,278,374,275,369,275,369,274,359,279,355,279,355e"><v:fill 
opacity = "13107f"></v:fill></v:shape><v:shape 
style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: -1px;lEFT: 0px" 
id=CBeizer312  n"3"  s="-1" coordsize = "300,300" 
 fillcolor = "fuchsia" stroked = "f"  path = 
"m226,398 c226,398,236,411,224,417,222,413,220,407,220,407,221,396,226,398,226,398e"><v:fill 
opacity = "13107f"></v:fill></v:shape><v:shape 
style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: -1px;lEFT: 0px" 
id=CPoly294  n"14"  s="-1" coordsize = "300,300" 
 fillcolor = "#a52a2a" stroked = "f"  path = 
"m233,366l227,379,217,391,207,404,199,416,195,431,198,431,198,423,203,417,218,396,226,387,234,373,248,362,267,344 xe"></v:shape><v:shape 
style="POSITION: absolute; WIDTH: 14px; HEIGHT: 52px; TOP: 0px;lEFT: 0px" 
 coordsize = "14,52"  fillcolor = "#a52a2a" strokecolor = 
"#a52a2a" path = 
"m225,388l225,388,225,389,225,390,225,391,225,392,226,393,226,394,226,395,226,396,226,397,225,398,225,397,224,397,224,396,224,395,224,394,224,393,224,392,224,391,224,390 224,389,223,389,223,388,223,387,223,386e"></v:shape><v:shape 
style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: -17px;lEFT: -4px" 
id=CPoly427  n"14"  s"-4" s="-17" coordsize = 
"300,300"  fillcolor = "#a52a2a" stroked = "f"  
path = 
"m199,275l183,260,169,253,146,245,131,239,120,240,106,241,106,248,118,247,132,248,142,252,164,257,182,266,191,279 xe"></v:shape><v:shape 
style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: -1px;lEFT: 0px" 
id=CBeizer932  n"5"  s="-1" coordsize = "300,300" 
 fillcolor = "fuchsia" stroked = "f"  path = 
"m203,378 c229,403,207,432,192,407,176,438,173,400,172,404,171,410,137,417,159,386,149,380,156,351,175,366,178,345,209,336,203,378e"><v:fill 
type = "gradientRadial"></v:fill></v:shape>
<v:shape 
style="POSITION: absolute; WIDTH: 16px; HEIGHT: 10px; TOP: 0px;lEFT: 0px" 
 coordsize = "16,10" filled = "f" fillcolor = "white" strokecolor = 
"#ffacd6" path = 
"m335,411l335,411,335,410,337,409,337,408,338,408,339,408,340,408,341,408,342,408,342,409,342,410,342,411,341,412,340,412,339,412,338,412,337,411,336,411,336,410,335,410e"></v:shape><v:shape 
style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: 52px;lEFT: -464px" 
id=CBeizer661  n"5"  s"-464" coordsize = 
"300,300"  fillcolor = "yellow" stroked = "f"  
path = 
"m820,164 c820,164,830,165,827,181,826,186,810,184,810,184,810,184,792,177,792,177,786,166,799,160,799,160,799,160,820,164,820,164e"></v:shape><v:shape 
style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: 59px;lEFT: -451px" 
id=CBeizer287  n"5"  s"-451" coordsize = 
"300,300"  fillcolor = "yellow" stroked = "f"  
path = 
"m726,122 c726,122,743,113,743,113,743,105,734,101,734,101,734,101,718,106,718,106,718,106,715,117,715,117,715,117,726,122,726,122e"></v:shape><v:shape 
style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: 42px;lEFT: -459px" 
id=CBeizer644  n"4"  s"-459" coordsize = 
"300,300"  fillcolor = "yellow" stroked = "f"  
path = 
"m801,295 c802,302,800,308,800,308,800,308,777,328,777,327,777,326,776,303,777,294,785,292,800,285,801,295e"></v:shape><v:shape 
style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: 41px;lEFT: -437px" 
id=CPoly740  n"7"  s"-437" coordsize = "300,300" 
 fillcolor = "yellow" stroked = "f"  path = 
"m630,336l631,355,620,357,614,350,605,345,613,335,620,326 xe"></v:shape><v:shape 
style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: 44px;lEFT: -431px" 
id=CPoly408  n"7"  s"-431" coordsize = "300,300" 
 fillcolor = "yellow" stroked = "f"  path = 
"m598,248l603,258,599,263,591,262,585,262,576,252,583,243 xe"></v:shape><v:shape 
style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: 42px;lEFT: -444px" 
id=CPoly154  n"6"  s"-444" coordsize = "300,300" 
 fillcolor = "yellow" stroked = "f"  path = 
"m698,265l704,277,698,282,687,282,677,272,684,263 xe"><v:fill 
type = "solid"></v:fill></v:shape><v:shape 
style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: 45px;lEFT: -446px" 
id=CPoly94  n"18" s"-446" coordsize = "300,300"  
fillcolor = "#f60" stroked = "f"  path = 
"m685,265l683,266,685,267,689,272,692,275,695,275,696,272,699,272,699,270,695,271,695,269,698,268,697,266,693,271,692,270,695,265,692,264,691,269,689,269,685,265e"></v:shape><v:shape 
style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: -1px;lEFT: 0px" 
id=CPoly41  s="-1" coordsize = "300,300" filled = "f" fillcolor = 
"white"></v:shape><v:shape 
style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: 7px;lEFT: -289px" 
id=CPoly542  n"24" s"-289" coordsize = "300,300"  
fillcolor = "#f90" stroked = "f" strokecolor = "#930" path = 
"m616,344l620,347,621,347,623,346,628,346,628,344,626,343,623,344,622,343,624,341,626,339,624,338,621,341,621,342,620,342,620,341,622,335,621,334,619,337,618,341,618,343 614,337,612,334,611,336,613,338,616,344e"></v:shape><v:shape 
style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: 49px;lEFT: -433px" 
id=CPoly835  n"22" s"-433" coordsize = "300,300"  
fillcolor = "#f60" stroked = "f"  path = 
"m587,252l590,255,592,255,594,253,598,253,598,250,594,251,592,251,595,250,596,248,596,247,594,247,592,248,592,249,591,249,592,246,593,244,590,245,590,248,589,249,586,246 584,245,583,246,587,252e"></v:shape><v:shape 
style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: 2px;lEFT: -532px" 
 n"25" s"-532" coordsize = "300,300"  fillcolor = 
"#f90" stroked = "f"  path = 
"m810,175l812,174,815,173,818,172,818,169,814,171,813,171,812,169,815,167,816,165,813,165,811,170,810,171,810,168,812,163,810,162,808,166,808,170,807,170,805,167,803,165 801,166,801,167,803,169,805,171,807,173,810,175e"></v:shape><v:shape 
style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: 56px;lEFT: -465px" 
 n"25" s"-465" coordsize = "300,300"  fillcolor = 
"#f90" stroked = "f"  path = 
"m810,175l812,174,815,173,818,172,818,169,814,171,813,171,812,169,815,167,816,165,813,165,811,170,810,171,810,168,812,163,810,162,808,166,808,170,807,170,805,167,803,165 801,166,801,167,803,169,805,171,807,173,810,175e"></v:shape><v:shape 
style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: 44px;lEFT: -438px" 
 n"24" s"-438" coordsize = "300,300"  fillcolor = 
"#f90" stroked = "f" strokecolor = "#930" path = 
"m616,344l620,347,621,347,623,346,628,346,628,344,626,343,623,344,622,343,624,341,626,339,624,338,621,341,621,342,620,342,620,341,622,335,621,334,619,337,618,341,618,343 614,337,612,334,611,336,613,338,616,344e"></v:shape><v:shape 
style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: 42px;lEFT: 100px" 
 n"5"  coordsize = "300,300"  
fillcolor = "fuchsia" stroked = "f" strokecolor = "#ffacd6" path = 
"m365,212 c377,202,400,232,378,239,385,262,351,260,345,250,336,271,320,251,322,243,279,233,320,192,334,217,339,172,371,200,365,212e"><v:fill 
type = "gradientRadial" focus = "30%"></v:fill></v:shape><v:shape 
style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: 99px;lEFT: -359px" 
 n"5"  s"-359" coordsize = "300,300" filled = 
"t" fillcolor = "yellow" stroked = "f"  path = 
"m820,164 c820,164,830,165,827,181,826,186,810,184,810,184,810,184,792,177,792,177,786,166,799,160,799,160,799,160,820,164,820,164e"></v:shape><v:shape 
style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: -68px;lEFT: -169px" 
 n"24" s"-169" s="-68" coordsize = "300,300"  
fillcolor = "#f90" stroked = "f" strokecolor = "#930" path = 
"m616,344l620,347,621,347,623,346,628,346,628,344,626,343,623,344,622,343,624,341,626,339,624,338,621,341,621,342,620,342,620,341,622,335,621,334,619,337,618,341,618,343 614,337,612,334,611,336,613,338,616,344e"></v:shape></v:group></v:group>
</body>
</html>

AخA
 
<html xmlns:v>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<title>梅花</title>
<meta name="generator" content="Namo WebEditor">
<style>
v\:*{behavior:url(#default#VML);}
</style>
</head>
<body>
<v:group 
style="POSITION: absolute; WIDTH: 500px; DISPLAY: block; HEIGHT: 400px; TOP: 110px;lEFT: -16px" 
id=Canvas_Data coordsize = "500,400">
<v:shape 
style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: 54px;lEFT: -495px" 

CSS代码

复制格式化注释注释颜色清空

放大

CSS代码...​x
 
​

JS代码

复制格式化注释注释清空

放大

JS代码...xxxxxxxxxx
 
​

运行代码

简介

请输入代码名称！

名称

真牛！用VML在网页上生成一幅梅花图

分类

网站常用

描述

真牛！用VML在网页上生成一幅梅花图，看来作者是这方面的有才人啊，佩服佩服，VML的爱好者们可不能错过机会哟。