找找美洲豹的VML教程
这里面有一章介绍v:template的
他的示例就是一个三角形
这里面有一章介绍v:template的
他的示例就是一个三角形
解决方案 »
- 怎样实现一个日期字符串+n小时得到一个新的日期?谢谢~
- 如何在ajax返回的responseText中取出所有链接
- 在JS中如何限制不能输入空格啊?
- [求助]Select控件的Option没有ondblclick属性
- 请问这是我的个别现象吗?
- 谁会js控制div中的内容可通过左右键按钮滚动,急用!!!11
- insertRow()方法新增的行,如何为它的属性赋值
- 用什么方法,可以通过web程序判断出当前用户的windows主题设置???
- 如何用javascript在当前窗口打开网页?
- bootstrap dialog界面弹出问题
- IFRAME内使用锚点,页面无法准确定位的问题.求教!
- 如何实现打开ie的时候去掉菜单栏和工具栏
<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">
VML的这个功能很有用,模版,顾名思义,它可以减少书写代码的量,又使的代码可读性提高。在理解VML模版的时候,可以
和 HTML 的 CSS 一样理解,它是定义好的一种形状,下次使用的时候直接声明 type 属性就可以了。看看下面的例子:<br><br>
<v:<font color=red>shapetype id="arrowUP" </font>coordsize="6 6"> <!--三角形 向上--><br>
<v:path v="m 3,0 l 0,6,6,6,3,0 x e" /><br>
</v:shapetype><br>
<v:<font color=red>shapetype id="arrowDown" </font>coordsize="6 6"> <!--三角形 向下--><br>
<v:path v="m 0,0 l 3,6,6,0,0,0 x e" /><br>
</v:shapetype><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>
定义好上面的模版后,以后就可以直接调用了:<br><br>
<v:shape type="#arrowUP" style="position:relative;width:50;height:50"/><v:shape type="<font color=red>#arrowUP</font>" style="position:relative;width:50;height:50"/><br><br>
<v:shape type="#arrowDown" style="position:relative;width:50;height:50"/><v:shape type="<font color=red>#arrowDown</font>" style="position:relative;width:50;height:50"/><br><br>
<v:shape type="#arrowDown" fillcolor=blue style="position:relative;width:80;height:80"/><v:shape fillcolor=blue type="<font color=red>#arrowDown</font>" style="position:relative;width:80;height:80" /><br><br>
不知道大家有没有注意到,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>
windows下用vml,firefox下用canvas组件也可以,
<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>
<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>