javascript异步编程系列【一】----用Jscex画圆
2011-08-16 08:54 【当耐特】 阅读(13709) 评论(15) 编辑 收藏 举报一.简介
关注老赵的jscex很久了，jscex利用eval(str)的无限可能，从“$async” 到“async”，从不支持if else 等 到支持 if else等·，jscex正在不断完善和优化当中。jscex完全可以投入生产环境了
··
二.画圆
昨天讲完pi,今天来画圆吧！
在支持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>
<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>
<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>
这样就可以目睹画圆全过程！
三.在线演示
相关js请上https://github.com/JeffreyZhao/jscex或者http://www.sndacode.com/projects/jscex/wiki下载吧····
四.同步
本文已同步更新至：
