JS異步編程一：用Jscex畫圓
作者：當耐特磚家
關注老趙的jscex很久了，jscex利用eval(str)的無限可能，從“$async” 到“async”，從不支持if else 等 到支持 if else等·，jscex正在不斷完善和優化當中。
一.簡介
關注老趙的jscex很久了，jscex利用eval(str)的無限可能，從“$async” 到“async”，從不支持if else 等 到支持 if else等·，jscex正在不斷完善和優化當中。jscex完全可以投入生產環境了··
二.畫圓
在支持html5的瀏覽器中執行下面代碼：
- >
- <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閃亮登場！
- >
- <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>
這樣就可以目睹畫圓全過程！
原文鏈接：http://www.cnblogs.com/iamzhanglei/archive/2011/08/16/2140113.html
【編輯推薦】
- JS異步編程二：自由落體
- JS異步編程三：Jscex無創痕切入jQUI
- JS異步編程四：Jscex+jQ打造游戲力度條
- JS異步編程五：Jscex制作憤怒的小鳥
- 看JavaScript如何實現頁面自適
責任編輯：張偉
來源：
當耐特磚家的博客
