JavaScript异步编程之用Jscex画圆


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


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

  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <body> 
  4.  
  5. <canvas id="myCanvas" width="480" height="300" style="border:1px solid #c3c3c3;"> 
  6. Your browser does not support the canvas element.  
  7. </canvas> 
  8. <script type="text/javascript"> 
  9.  
  10.     var c = document.getElementById("myCanvas");  
  11.     var ccxt = c.getContext("2d");  
  12.     var x = 150;  
  13.     var y = 150;  
  14.     var r = 100;  
  15.     cxt.moveTo(x - r, y);  
  16.     for (var i = x - r; i < x + r + 1; i++) {  
  17.         var tempY = Math.pow(r * r - (x - i) * (x - i), 1 / 2);  
  18.         cxt.lineTo(i, y + tempY);  
  19.     }  
  20.     cxt.moveTo(x - r, y);  
  21.     for (var i = x - r; i < x + r + 1; i++) {  
  22.         var tempY = Math.pow(r * r - (x - i) * (x - i), 1 / 2);  
  23.         cxt.lineTo(i, y - tempY);  
  24.     }  
  25.       cxt.stroke();  
  26.  
  27. </script> 
  28.  
  29. </body> 
  30. </html> 

在Canvas里显示如下:





但是,我们明明是在画圆,怎么没有看到画圆的过程?javascript就是这样,解释完就画完了,而不会呈现解释的过程,这也是为什么javascript不用考虑多线程问题,仅仅UI线程。那么怎么看到画圆的过程?


jscex闪亮登场!

  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <body> 
  4. <canvas id="myCanvas" width="480" height="300" style="border:1px solid #c3c3c3;"> 
  5. Your browser does not support the canvas element.  
  6. </canvas> 
  7.     <script language="javascript" type="text/javascript" src="lib/uglifyjs-parser.js"></script> 
  8.     <script language="javascript" type="text/javascript" src="src/jscex.js"></script> 
  9.     <script language="javascript" type="text/javascript" src="src/jscex.builderBase.js"></script> 
  10.     <script language="javascript" type="text/javascript" src="src/jscex.async.js"></script> 
  11. <script type="text/javascript"> 
  12.     var c = document.getElementById("myCanvas");  
  13.     var ccxt = c.getContext("2d");  
  14.     var x = 150;  
  15.     var y = 150;  
  16.     var r = 100;  
  17.     var drawAsync = eval(Jscex.compile("async", function () {  
  18.         cxt.moveTo(x - r, y);  
  19.         for (var i = x - r; i < x + r + 1; i++) {  
  20.             $await(Jscex.Async.sleep(10));  
  21.             var tempY = Math.pow(r * r - (x - i) * (x - i), 1 / 2);  
  22.             cxt.lineTo(i, y + tempY);  
  23.             cxt.stroke();  
  24.         }  
  25.         cxt.moveTo(x - r, y);  
  26.         for (var i = x - r; i < x + r + 1; i++) {  
  27.             $await(Jscex.Async.sleep(10));  
  28.             var tempY = Math.pow(r * r - (x - i) * (x - i), 1 / 2);  
  29.             cxt.lineTo(i, y - tempY);  
  30.             cxt.stroke();  
  31.         }  
  32.         
  33.     }));  
  34.     drawAsync().start();  
  35. </script> 
  36.  
  37. </body> 
  38. </html> 

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


Your browser does not support the canvas element.




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


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




标签:

友情链接
轻松育儿世界奇观
苏ICP备16066217号-2