看見标題中出現了一個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');
};