JavaScript异步编程之用Jscex画圆-javascript 编程

关注老赵的jscex很久了，jscex利用eval(str)的无限可能，从“$async” 到“async”，从不支持if else 等到支持 if else等·，jscex正在不断完善和优化当中。jscex完全可以投入生产环境了昨天讲完pi,今天来画圆吧!

在支持html 5的浏览器中执行下面代码：

<!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就是这样，解释完就画完了，而不会呈现解释的过程，这也是为什么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

【编辑推荐】