第十日
此刻我的思想真的枯竭了
Jscex异步编程库的 使用方法
Jscex异步编程库，该库由国人 赵劼 开发。是开源的，你可以上https://github.com/JeffreyZhao/jscex免费获取到。如果你想进一步了解，请访问http://blog.zhaojie.me/tag/Jscex/来学习更多。
按照老赵的解释：Jscex的核心功能之一，便是对异步编程进行了极大程度的简化，帮助让开发人员摆脱异步编程方面烦恼，将注意力尽可能多地放在逻辑的表现上，而非异步编程过程中的各类奇技淫巧。
在Canvas上用，我理解的就是把JavaScript绘图，变换等操作按照时间轴显示出来，但是按照老赵的意思，貌似时间轴在表面上是用不到的。
如果要使用Jscex的异步编程库，先从github上获取Jscex的压缩包，解压后有src文件夹
然后在你的html文件中引入js
<script src="uglifyjs-parser.js"></script> <script src="jscex-jit.js"></script> <script src="jscex-builderbase.js"></script> <script src="jscex-async.js"></script> <script src="jscex-async-powerpack.js"></script>
当然，文件的目录你要写对。
下面代码是Jscex的简单示例，演示一个用Jscex从300，170的坐标点画300像素长的直线过程。
var canvas = document.getElementById("myCanvas");
var cxt = canvas.getContext("2d");
var line = {
x: 300,
y: 170,
length: 300,
width: 4
};
var lineAsync = eval(Jscex.compile("async", function () {
try{
cxt.lineWidth = line.width;
cxt.moveTo(line.x,line.y);
for(var i=0; i<line.length; i++){
$await(Jscex.Async.sleep(10));
line.x++;
line.y++;
cxt.lineTo(line.x,line.y);
cxt.stroke();
}
} catch (e) {alert(e)}
}));
lineAsync().start();
当然你也可以不用Jscex，但是你会看不到画的过程。以下是不用Jscex的示例：
var canvas = document.getElementById("myCanvas");
var cxt = canvas.getContext("2d");
var line = {
x: 300,
y: 170,
length: 300,
width: 4
};
cxt.lineWidth = line.width;
cxt.moveTo(line.x,line.y);
cxt.lineTo(line.x+300,line.y+300);
cxt.stroke();
HTML代码是：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Canvas Test</title>
<script language="javascript" type="text/javascript" src="./src/uglifyjs-parser.js"></script>
<script language="javascript" type="text/javascript" src="./src/jscex-jit.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 language="javascript" type="text/javascript" src="./src/jscex-async-powerpack.js"></script>
</head>
<body style="margin:0;padding:0">
<!--上面的引入JS的路径你要写对，我是放在同目录下src文件夹下-->
<canvas style="border:1px solid #c3c3c3;" id="myCanvas" width="800" height="600" >
you browser do not support canvas.
</canvas>
</body>
</html>
这是用Jscex实现动画的非常简单的示例，包括Jscex的引入和使用示例。如果你感兴趣，可以访问老赵的博客还有一个是张磊的博客。
原创文章，转载请注明： 转载自第十日
本文链接地址: Jscex异步编程库的 使用方法
Tags: Canvas, HTML5, JavaScript, Jscex