JS异步编程一：用Jscex画圆

一.简介

创新互联建站是一家专业提供长兴企业网站建设,专注与成都做网站、网站设计、外贸营销网站建设、HTML5、小程序制作等业务。10年已为长兴众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。

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

二.画圆

在支持html5的浏览器中执行下面代码：

 
 
 
 
  
  
  
  
> 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
Your browser does not support the canvas element. 
  
  
  
  
canvas> 
  
  
  
  
 
  
  
  
  
    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闪亮登场！

 
 
 
 
  
  
  
  
> 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
Your browser does not support the canvas element. 
  
  
  
  
canvas> 
  
  
  
  
    script> 
  
  
  
  
    script> 
  
  
  
  
    script> 
  
  
  
  
    script> 
  
  
  
  
 
  
  
  
  
    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> 
 
 
 

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

网站栏目：JS异步编程一：用Jscex画圆
链接地址：http://www.mswzjz.com/qtweb/news32/193182.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联