用javascript繪製超級瑪麗

來源:互聯網
上載者:User

    上一篇,我講過,有一個日本人,小雄他做了一個非常強大的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 , Firefox和Google 就更相容了因為他們本身就支援畫布元素。

如果做遊戲是首選,因為Silverlight 的速度相當不錯,而且,都是以x,y軸來抒寫,我們只要定義了畫布,就不需要html div.
因為這個畫布就是一個地區整體或控制項。

 

 

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.