频道栏目
首页 > 资讯 > JavaScript > 正文

javascript异步编程----用jscex画圆

11-08-16        来源:[db:作者]  
收藏   我要投稿

今天来画圆吧!

     在支持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>
 

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

 

相关TAG标签
上一篇:Java和C++在细节上的差异(四)
下一篇:Android深入浅出学习笔记之多线程及异步处理
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站