用javascript绘制超级玛丽
2010-09-14 13:35:16 来源:WEB开发网下面我就说下如何进行绘图,十分简单,我们只需要建立一个js数组,人性化的输出界面即可(如下)。
functionboot(){
draw(document.getElementById('canvas'));
draw(document.getElementById('vmlcanvas'));
}
functiondraw(e){
vardot=
" 11111 "+
" 111111111"+
" 2223323 "+
"2323332333"+
"23223332333"+
"2233332222"+
" 3333333 "+
" 221222 "+
"2221221222"+
"222211112222"+
"332131131233"+
"331111111133"+
" 111 111 "+
"222 222"+
"2222 2222";
varary=dot.split("");
vardata=[];
vari,iz;
for(i=0,iz=ary.length;i<iz;++i){
switch(parseInt(ary[i])||0){
case0:data.push("");break;
case1:data.push("#FF3900");break;
case2:data.push("#AD7B00");break;
case3:data.push("#FFA542");break;
}
}
uu.draw(e).scale(5,5).icon(5,25,12,15,data);
}
上面的代码很简单,我们绘制一个绘图数组,下面直接分割输出即可。
注意下 .icon(x轴,y轴,数组的宽度,数组的高度)
(这是我本人绘的)
我们将我们的视图数组存取为一个对象,就可以多次调用,或做动画。
浏览器兼容方面无需担心, 因为这个库兼容能力很强,在IE下,它会把js 代码转化为 Silverlight ,如果客户没有安装
Silverlight,程序会解析为VML , 火狐和Google 就更兼容了因为他们本身就支持画布元素。
如果做游戏是首选,因为Silverlight 的速度相当不错,而且,都是以x,y轴来抒写,我们只要定义了画布,就不需要html div.
因为这个画布就是一个区域整体或控件。
Tags:javascript 绘制 超级
编辑录入:爽爽 [复制链接] [打 印]更多精彩
赞助商链接