JavaScript異步編程之用Jscex畫圓
作者：當(dāng)耐特磚家
關(guān)注老趙的jscex很久了，jscex利用eval(str)的無限可能，從“$async” 到“async”，從不支持if else 等 到支持 if else等·，jscex正在不斷完善和優(yōu)化當(dāng)中。jscex完全可以投入生產(chǎn)環(huán)境了 昨天講完pi,今天來畫圓吧!
關(guān)注老趙的jscex很久了，jscex利用eval(str)的無限可能，從“$async” 到“async”，從不支持if else 等 到支持 if else等·，jscex正在不斷完善和優(yōu)化當(dāng)中。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就是這樣，解釋完就畫完了，而不會(huì)呈現(xiàn)解釋的過程，這也是為什么javascript不用考慮多線程問題，僅僅UI線程。那么怎么看到畫圓的過程?
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 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>
這樣就可以目睹畫圓全過程!
相關(guān)js請(qǐng)上https://github.com/JeffreyZhao/jscex或者h(yuǎn)ttp://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異步編程體驗(yàn)
- 使用HTML 5和Javascript設(shè)計(jì)繪圖程序
- 16個(gè)優(yōu)秀的JavaScript教程和庫推薦
- Dart VS JavaScript之JavaScript的先天殘疾
責(zé)任編輯：陳貽新
來源：
當(dāng)耐特博客
