用javascript绘制超级玛丽

    上一篇，我讲过，有一个日本人，小雄他做了一个非常强大的js画布库，能将 javascript 转换为 Silverlight
这次要用到他的函数库，地址在 http://www.cnblogs.com/libinqq/archive/2009/01/08/1371676.html

 下面我就说下如何进行绘图，十分简单，我们只需要建立一个js数组，人性化的输出界面即可（如下）。 

Code
function boot() {
  draw(document.getElementById('canvas'));
  draw(document.getElementById('vmlcanvas'));
}
function draw(e) {
  var dot =
            "   11111    "+
            "  111111111 "+
            "  2223323   "+
            " 2323332333 "+
            " 23223332333"+
            " 2233332222 "+
            "   3333333  "+
            "  221222    "+
            " 2221221222 "+
            "222211112222"+
            "332131131233"+
            "331111111133"+
            "  111  111  "+
            " 222    222 "+
            "2222    2222";
  var ary = dot.split("");
  var data = [];
  var i, iz;
  for (i = 0, iz = ary.length; i < iz; ++i) {
    switch (parseInt(ary[i]) || 0) {
    case 0: data.push(""); break;
    case 1: data.push("#FF3900"); break;
    case 2: data.push("#AD7B00"); break;
    case 3: 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.
因为这个画布就是一个区域整体或控件。

 

 

 

转载于:https://www.cnblogs.com/libinqq/archive/2009/01/10/1373478.html