看見標(biāo)題中出現(xiàn)了一個(gè)vml，這個(gè)很多人不是很熟悉，在這里先簡單講解一下vml的相關(guān)知識(shí)點(diǎn)5，6vml

全名 vector mark language ?矢量標(biāo)記語言

微軟自帶的畫筆工具

vml出現(xiàn)的時(shí)間比較早，早在IE5，6，7的時(shí)候被用過，IE8不兼容如果想讓IE8也兼容的話，需要加上

vml的基本繪圖流程：首先給html添加一個(gè)命名空間，有下面三種方式，但是用起來的話，還是第一種比較高大上一點(diǎn)xmlns:tobie="urn:schemas-microsoft-com:vml"??√

xmlns:tobie="http://www.baidu.com"

xmlns:t

2.必須添加一個(gè)樣式tobie\:*?{behavior:?url(#default#VML);}

3.必須使用vml標(biāo)記

vml也有幾個(gè)屬性：

strokecolor="red"描邊顏色

strokeweight="10"線寬

fillcolor="red"填充

*vml標(biāo)簽必須用塊元素，

display:block

position:absolutehtml>

vml?line/title>

tobie\:*?{behavior:?url(#default#VML);}

vml還有其他功能，這里基本就不說明了，下面說一下一個(gè)兼容svg,vml的庫就可以了，用起來和jquery一樣順手

raphael.js(拉斐爾)----兼容vml+svg

手冊(cè)可以查查國內(nèi)的其他

raphael.js兼容IE6-9,CHROM,FF,采用的是vml+svg技術(shù)

使用：準(zhǔn)備一個(gè)畫布

var p1 = Raphael(x,y,w,h);

2.畫圖

var rect =p1.rect(x,y,w,h)

3.設(shè)置屬性

rect.attr(name,value);

rect.attr({name:value});

4.加事件

rect.click(fn){}

支持鏈?zhǔn)讲僮鱤tml>

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')

});

};

運(yùn)動(dòng)

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這個(gè)屬性.attr('transform','r30');???旋轉(zhuǎn)???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庫

官網(wǎng)：http://www.jcscript.com/

手冊(cè)：

基本用法：

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運(yùn)動(dòng)

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高級(jí)運(yùn)動(dòng)

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');

};

總結(jié)

以上是生活随笔為你收集整理的html绘图插件,canvas,svg,vml绘图插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。