JS異步編程一：用Jscex畫圓

作者：當耐特磚家 2012-06-14 13:40:04

關注老趙的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如何實現頁面自適

責任編輯：張偉來源：當耐特磚家的博客

JavaScript