javascript异步编程系列【一】----用Jscex画圆

一.简介

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

 

二.画圆

     昨天讲完pi,今天来画圆吧！

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

<! 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里显示如下：

但是，我们明明是在画圆，怎么没有看到画圆的过程？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  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 >

 

 这样就可以目睹画圆全过程！

 

三.在线演示

Your browser does not support the canvas element.

相关js请上https://github.com/JeffreyZhao/jscex或者http://www.sndacode.com/projects/jscex/wiki下载吧····

四.同步

本文已同步更新至：

HTML5实验室【目录】:   http://www.cnblogs.com/iamzhanglei/archive/2011/11/06/2237870.html