javascript異步編程系列【一】----用Jscex畫圓

2011-08-16 08:54 【當(dāng)耐特】閱讀(13740) 評(píng)論(15) 收藏舉報(bào)

一.簡(jiǎn)介

關(guān)注老趙的jscex很久了，jscex利用eval(str)的無(wú)限可能，從“$async” 到“async”，從不支持if else 等到支持 if else等·，jscex正在不斷完善和優(yōu)化當(dāng)中。jscex完全可以投入生產(chǎn)環(huán)境了··

二.畫圓

昨天講完pi,今天來(lái)畫圓吧！

在支持html5的瀏覽器中執(zhí)行下面代碼：

<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas" width="480" height="300" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">

    var c = document.getElementById("myCanvas");
    var cxt = c.getContext("2d");
    var x = 150;
    var y = 150;
    var r = 100;
    cxt.moveTo(x - r, y);
    for (var i = x - r; i < x + r + 1; i++) {
        var tempY = Math.pow(r * r - (x - i) * (x - i), 1 / 2);
        cxt.lineTo(i, y + tempY);
    }
    cxt.moveTo(x - r, y);
    for (var i = x - r; i < x + r + 1; i++) {
        var tempY = Math.pow(r * r - (x - i) * (x - i), 1 / 2);
        cxt.lineTo(i, y - tempY);
    }
      cxt.stroke();

</script>

</body>
</html>

在Canvas里顯示如下：

但是，我們明明是在畫圓，怎么沒有看到畫圓的過(guò)程？javascript就是這樣，解釋完就畫完了，而不會(huì)呈現(xiàn)解釋的過(guò)程，這也是為什么javascript不用考慮多線程問(wèn)題，僅僅UI線程。那么怎么看到畫圓的過(guò)程？

jscex閃亮登場(chǎng)！

<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="480" height="300" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
    <script language="javascript" type="text/javascript" src="lib/uglifyjs-parser.js"></script>
    <script language="javascript" type="text/javascript" src="src/jscex.js"></script>
    <script language="javascript" type="text/javascript" src="src/jscex.builderBase.js"></script>
    <script language="javascript" type="text/javascript" src="src/jscex.async.js"></script>
<script type="text/javascript">
    var c = document.getElementById("myCanvas");
    var cxt = c.getContext("2d");
    var x = 150;
    var y = 150;
    var r = 100;
    var drawAsync = eval(Jscex.compile("async", function () {
        cxt.moveTo(x - r, y);
        for (var i = x - r; i < x + r + 1; i++) {
            $await(Jscex.Async.sleep(10));
            var tempY = Math.pow(r * r - (x - i) * (x - i), 1 / 2);
            cxt.lineTo(i, y + tempY);
            cxt.stroke();
        }
        cxt.moveTo(x - r, y);
        for (var i = x - r; i < x + r + 1; i++) {
            $await(Jscex.Async.sleep(10));
            var tempY = Math.pow(r * r - (x - i) * (x - i), 1 / 2);
            cxt.lineTo(i, y - tempY);
            cxt.stroke();
        }

    }));
    drawAsync().start();
</script>

</body>
</html>

這樣就可以目睹畫圓全過(guò)程！

三.在線演示

相關(guān)js請(qǐng)上https://github.com/JeffreyZhao/jscex或者http://www.sndacode.com/projects/jscex/wiki下載吧····

四.同步

本文已同步更新至：

HTML5實(shí)驗(yàn)室【目錄】: http://www.rzrgm.cn/iamzhanglei/archive/2011/11/06/2237870.html

刷新頁(yè)面返回頂部

當(dāng)耐特