JavaScript異步編程之用Jscex畫圓

作者：當耐特磚家 2011-11-10 10:23:56

關注老趙的jscex很久了，jscex利用eval(str)的無限可能，從“$async” 到“async”，從不支持if else 等到支持 if else等·，jscex正在不斷完善和優(yōu)化當中。jscex完全可以投入生產(chǎn)環(huán)境了昨天講完pi,今天來畫圓吧!

在支持html 5的瀏覽器中執(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 ccxt = 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里顯示如下：

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

jscex閃亮登場!

<!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 ccxt = 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>

這樣就可以目睹畫圓全過程!

相關js請上https://github.com/JeffreyZhao/jscex或者http://www.sndacode.com/projects/jscex/wiki下載吧····

原文：http://www.cnblogs.com/iamzhanglei/archive/2011/08/16/2140113.html

【編輯推薦】

基于Node.js、Express和Jscex開發(fā)的ToDo網(wǎng)站示例
使用Jscex改善JavaScript異步編程體驗
使用HTML 5和Javascript設計繪圖程序
16個優(yōu)秀的JavaScript教程和庫推薦
Dart VS JavaScript之JavaScript的先天殘疾

責任編輯：陳貽新來源：當耐特博客

Jscex