如何画三角形？

找找美洲豹的VML教程
这里面有一章介绍v:template的
他的示例就是一个三角形

解决方案 »

  1.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html xmlns:v="urn:schemas-microsoft-com:vml">
    <head>
    <title>Thinking in VML</title>
    </head>
    <STYLE>
     v\:* { BEHAVIOR: url(#default#VML) }
    </STYLE>
    <LINK REL="stylesheet" TYPE="text/css" HREF="style.css" />
    <body>
    <table align="center">
    <tr>
    <td align="center" class="title"><strong>ShapeType给VML制作模版</strong></td>
    </tr>
    <tr>
    <td >
    <div class="memo" style="width:700;line-height:23px">
    &nbsp;&nbsp;&nbsp;&nbsp;VML的这个功能很有用，模版，顾名思义，它可以减少书写代码的量，又使的代码可读性提高。在理解VML模版的时候，可以
    和 HTML 的 CSS 一样理解，它是定义好的一种形状，下次使用的时候直接声明 type 属性就可以了。看看下面的例子：<br><br>
    &lt;v:<font color=red>shapetype id="arrowUP" </font>coordsize="6 6"&gt;    &lt;!--三角形 向上--&gt;<br>
    &nbsp;&nbsp;&nbsp;&nbsp;&lt;v:path v="m 3,0 l 0,6,6,6,3,0 x e" /&gt;<br>
    &lt;/v:shapetype&gt;<br>
    &lt;v:<font color=red>shapetype id="arrowDown" </font>coordsize="6 6"&gt;  &lt;!--三角形 向下--&gt;<br>
    &nbsp;&nbsp;&nbsp;&nbsp;&lt;v:path v="m 0,0 l 3,6,6,0,0,0 x e" /&gt;<br>
    &lt;/v:shapetype&gt;<br><br>
    <v:shapetype id="arrowUP" coordsize="6 6">
    <v:path v="m 3,0 l 0,6,6,6,3,0 x e" />    
    </v:shapetype>
    <v:shapetype id="arrowDown" coordsize="6 6">
    <v:path v="m 0,0 l 3,6,6,0,0,0 x e" />
    </v:shapetype>
    &nbsp;&nbsp;&nbsp;&nbsp;定义好上面的模版后，以后就可以直接调用了：<br><br>
    &nbsp;&nbsp;&nbsp;&nbsp;<v:shape type="#arrowUP" style="position:relative;width:50;height:50"/>&lt;v:shape type="<font color=red>#arrowUP</font>" style="position:relative;width:50;height:50"/&gt;<br><br>
    &nbsp;&nbsp;&nbsp;&nbsp;<v:shape type="#arrowDown" style="position:relative;width:50;height:50"/>&lt;v:shape type="<font color=red>#arrowDown</font>" style="position:relative;width:50;height:50"/&gt;<br><br>
    &nbsp;&nbsp;&nbsp;&nbsp;<v:shape type="#arrowDown" fillcolor=blue style="position:relative;width:80;height:80"/>&lt;v:shape fillcolor=blue type="<font color=red>#arrowDown</font>" style="position:relative;width:80;height:80" /&gt;<br><br>
    &nbsp;&nbsp;&nbsp;&nbsp;不知道大家有没有注意到，VML里面对“,”使用不强制的，你可以使用 coordsize="6,6" 也可以使用 coordsize="6 6" ，效果是一样的。
    </div>
    </td>
    </tr>
    <tr>
    <td class="title">
    <p align="right"><a href="javascript:self.scrollTo(0,0)">Top</a></p>
    <a href="index.html">返回目录</a><br>
    上一节:<a href="step7.html">Group容器</a><br>
    下一节:<a href="step21.html">脚本动态生成VML</a>
    </td>
    </tr>
    </table>
    </body>
    </html>
      

  2.   

    vml只能在ie下运行，如果想通用一点，还是用js“画”吧。http://www.knowsky.com/302991.html
      

  3.   

    用js画得累死
    windows下用vml，firefox下用canvas组件也可以，
      

  4.   

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>paint without vlm</title>
    </head>
    <body>
    <button onclick="testDrawCurve()">画曲线</button>
    <button onclick="testDrawArc()">画弧线</button>
    <button onclick="testDrawCircle()">画圆</button>
    <button onclick="testDrawLine()">画线</button>
    <button onclick="testDrawRectangle()">画矩形</button>
    <button onclick="testDrawPie()">画饼图</button>
    <div id=div1></div>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function testDrawCurve()
    {
    div1.innerHTML = drawCurve();
    }
    function testDrawArc()
    {
    div1.innerHTML =drawArc(150,150,100,0,270,"viloet")
    }
    function testDrawCircle()
    {
    div1.innerHTML = drawCircle(200,200,150,"blue");
    }
    function drawCircle(x0,y0,radius,color)
    {
    return drawArc(x0,y0,radius,0,360,color)
    }
    function testDrawLine()
    {
    div1.innerHTML = drawLine(100,200,500,200,"yellow")+drawLine(300,100,300,400,"black")+drawLine(600,400,100,100,"violet")
    }
    function testDrawRectangle()
    {
    div1.innerHTML = drawRectangle(200,100,600,200,"blue")+drawRectangle(100,200,400,500,"red")
    }
    function testDrawPie()
    {
    div1.innerHTML = drawPie(300,200,120,0,45,"red");
    }function drawLine(x0,y0,x1,y1,color)
    {
    var rs = "";
    if (y0 == y1)  //画横线
    {
    if (x0>x1){var t=x0;x0=x1;x1=t}  //新加的判断
    rs = "<table style='top:"+y0+";left:"+x0+";position:absolute'><td bgcolor="+color+" height=3 width="+Math.abs(x1-x0)+"></td></table>";
    }
    else if (x0 == x1)  //画竖线
    {
    if (y0>y1){var t=y0;y0=y1;y1=t}  //新加的判断
    rs = "<table style='top:"+y0+";left:"+x0+";position:absolute'><td bgcolor="+color+" width=1 height="+Math.abs(y1-y0)+"></td></table>";
    }
    else
    {
    var lx = x1-x0
    var ly = y1-y0
    var l = Math.sqrt(lx*lx+ly*ly)
    rs = new Array();
    for (var i=0;i<l;i+=1)
    {
    var p = i/l;
    var px = x0 + lx*p;
    var py = y0 + ly*p;
    rs[rs.length] = "<table style='top:"+py+";left:"+px+";position:absolute'><td bgcolor="+color+" height=3></td></table>";
    }
    rs = rs.join("");
    }
    return rs
    }
    function drawRectangle(x0,y0,x1,y1,color)
    {
    if (x0 == x1 || y0 == y1) return;
    if (x0>x1) {var t=x0;x0=x1;x1=t}
    if (y0>y1) {var t=y0;y0=y1;y1=t}
    return "<table style='top:"+y0+";left:"+x0+";position:absolute'><td bgcolor="+color+" width="+(x1-x0)+" height="+(y1-y0)+"></td></table>";
    }
    function drawPie(x0,y0,radius,startAngle,endAngle,color)
    {
    var rs = drawArc(x0,y0,radius,startAngle,endAngle,color)
    startAngle = startAngle/360*Math.PI*2;
    endAngle = endAngle/360*Math.PI*2;
    var startx=Math.sin(startAngle)*radius+x0;
    var endx=Math.sin(endAngle)*radius+x0;
    var starty=Math.cos(startAngle)*radius+y0;
    var endy=Math.cos(endAngle)*radius+y0;
    rs += drawLine(x0,y0,startx,starty,color)
    rs += drawLine(x0,y0,endx,endy,color)
    return rs;
    }
    function drawArc(x0,y0,radius,startAngle,endAngle,color)
    {
    rs = new Array();
    tmpar = new Array();
    startAngle = startAngle/360*Math.PI*2;
    endAngle = endAngle/360*Math.PI*2;
    for (var i=startAngle;i<endAngle;i+=(1/radius))
    {
    var dx = Math.sin(i)*radius+x0;
    var dy = Math.cos(i)*radius+y0;
    rs[rs.length] = "<table style='top:"+dy+";left:"+dx+";position:absolute'><td bgcolor="+color+" height=3></td></table>";
    }
    return (rs.join(""));
    }
    function drawCurve()
    {
    var rs = new Array();
    for (var i=0;i<2*Math.PI;i+=.02)
    {
    var x = 300-Math.sin(i)*100
    var y = 300-Math.cos(i)*100
    rs[rs.length] = "<table style='top:"+x+";left:"+(i*100+90)+";position:absolute'><td bgcolor=blue height=3></td></table>";
    rs[rs.length] = "<table style='top:"+y+";left:"+(i*100+90)+";position:absolute'><td bgcolor=violet height=3></td></table>";
    }
    return rs.join("");
    }
    //-->
    </SCRIPT>
    </body>
    </html>
      

  5.   

    不用vml也可以的<html>
    <head>
    <title>动态非图片LOGO</title>
    <script>
    function logo(obj) {
      var yplogo=obj.style;
      var temp=yplogo.borderTopColor;
      yplogo.borderTopColor=yplogo.borderRightColor;
      yplogo.borderRightColor=yplogo.borderBottomColor;
      yplogo.borderBottomColor=yplogo.borderLeftColor;
      yplogo.borderLeftColor=temp;
      }
    </script>
    </head>
    <body onload="setInterval('logo(logo1);logo(logo2);logo(logo3)',500)">
    <table id=logo1 cellpadding="0" cellspacing="0" style="border:10 solid;font-size:0;border-collapse:collapse;border-color:blue white white white">
    <tr><td></td></tr></table>
    <table id=logo2 cellpadding="0" cellspacing="0" style="border:20 solid;font-size:0;border-collapse:collapse;border-color:blue white white white">
    <tr><td></td></tr></table>
    <table id=logo3 cellpadding="0" cellspacing="0" style="border:50 solid;font-size:0;border-collapse:collapse;border-color:blue white white white">
    <tr><td></td></tr></table>
    </body>
    </html>