看见标题中出现了一个vml，这个很多人不是很熟悉，在这里先简单讲解一下vml的相关知识点5，6vml
全名 vector mark language 矢量标记语言
微软自带的画笔工具
vml出现的时间比较早，早在IE5，6，7的时候被用过，IE8不兼容如果想让IE8也兼容的话，需要加上
vml的基本绘图流程：首先给html添加一个命名空间，有下面三种方式，但是用起来的话，还是第一种比较高大上一点xmlns:tobie="urn:schemas-microsoft-com:vml" √
xmlns:tobie="http://www.baidu.com"
xmlns:t
2.必须添加一个样式tobie\:* {behavior: url(#default#VML);}
3.必须使用vml标记
vml也有几个属性：
strokecolor="red"描边颜色
strokeweight="10"线宽
fillcolor="red"填充
*vml标签必须用块元素，
display:block
position:absolutehtml>
vml line/title>
tobie\:* {behavior: url(#default#VML);}
vml还有其他功能，这里基本就不说明了，下面说一下一个兼容svg,vml的库就可以了，用起来和jquery一样顺手
raphael.js(拉斐尔)----兼容vml+svg
手册可以查查国内的其他
raphael.js兼容IE6-9,CHROM,FF,采用的是vml+svg技术
使用：准备一个画布
var p1 = Raphael(x,y,w,h);
2.画图
var rect =p1.rect(x,y,w,h)
3.设置属性
rect.attr(name,value);
rect.attr({name:value});
4.加事件
rect.click(fn){}
支持链式操作html>
repheal.js
window.οnlοad=function(){
var p1=Raphael(0,0,800,600);
var rect=p1.rect(100,100,300,200).attr({
'fill':'yellow',
'stroke':'blue',
'stroke-width':'10'
}).click(function(){
this.attr('fill','blue')
});
};
运动
obj.animate({},duration,easing,complete);html>
raphael animate
window.οnlοad=function(){
var p1=Raphael(0,0,800,600);
p1.circle(200,200,100).attr({fill:'red'}).click(function(){
this.animate({cx:300, cy:300, r:50,stroke:'blue',fill:'yellow'},500,'bounce');
});
};
变形--添加transform这个属性.attr('transform','r30'); 旋转 r---rotate
.attr('transform','t100,10'); 位移 t---translate
.attr('transform','s0.5,1'); 缩放 s---scalehtml>
raphael animate
>
window.οnlοad=function(){
var p1=Raphael(0,0,800,600);
p1.rect(100,100,200,100).attr('fill','red').click(function(){
//this.attr('transform','r30');
//this.animate({transform:'t100,100'},500);
this.animate({transform:'s0.5,2',transform:'t100,100',transform:'r30'},1200,'elastic');
});
};
jCanvasScript.js----canvas库
官网：http://www.jcscript.com/
手册：
基本用法：
jc.start(id)
jc.rect(x,y,w,h);
js.start(id);
看一下demohtml>
jCancasScript
body{
background: #000;
}
#c1{
background: #fff;
}
window.οnlοad=function(){
jc.start('c1');
jc.rect(100,100,300,200,'#f00',true);
jc.rect(200,200,100,200,'#ff0',true);
jc.start('c1');
};
html>
jCancasScript圆
body{
background: #000;
}
#c1{
background: #fff;
}
window.οnlοad=function(){
jc.start('c1');
jc.arc(200,200,100,0,360,false,'#f00',true);
jc.start('c1');
};
html>
jCancasScript事件
body{
background: #000;
}
#c1{
background: #fff;
}
window.οnlοad=function(){
jc.start('c1',true);
jc.circle(200,200,100,'#f00',true).click(function(){
this.attr('color','#00f');
//this.color('#00f');
});
jc.start('c1');
};
html>
jCancasScript运动
body{
background: #000;
}
#c1{
background: #fff;
}
window.οnlοad=function(){
jc.start('c1',true);
jc.circle(200,200,100,'#f00',true).click(function(){
//this.attr('color','#00f');
//this.color('#00f');
this.animate({radius:50,x:300, y:300, color:'#00f'},500,{type:'inOut', fn:'elastic', n:1.5},function(){
this.animate({
radius:100,
x:200,
y:200,
color:'#f00'
},1000);
});
});
jc.start('c1');
};
html>
jCancasScript高级运动
body{
background: #000;
}
#c1{
background: #fff;
}
window.οnlοad=function(){
jc.start('c1',true);
jc.rect(50,50,100,100,'#ccc',true).id('rect1');
jc.circle(200,200,100,'#f00',true).click(function(){
jc('#rect1').animate({
x:200,
y:400,
width:200,
height:10
},800);
this.animate({radius:50,x:300, y:300, color:'#00f'},500,{type:'inOut', fn:'elastic', n:1.5},function(){
this.animate({
radius:100,
x:200,
y:200,
color:'#f00'
},1000);
});
});
jc.start('c1');
};