I have been paying attention to Zhao's jscex for a long time. jscex uses the infinite possibilities of eval (str), from "$ async" to "async", and never supports if else or if else ·, jscex is constantly being improved and optimized. Jscex can be fully invested in the production environment. I finished talking about pi yesterday. Let's draw a circle today!
In a browser that supports html 5Run the following code:
- <!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 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>
The following is displayed in the Canvas:
However, we clearly draw circles. Why didn't we see the circle process? Javascript is like this. After the explanation is complete, the process of explanation is not displayed. This is why javascript does not need to consider multithreading, just the UI thread. So how can we see the circle process?
Jscex debut!
- <!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 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>
In this way, you can witness the entire process of circle painting!
Your browser does not support the canvas element.
For more information about js, go to callback ····
Original article: http://www.cnblogs.com/iamzhanglei/archive/2011/08/16/2140113.html
- ToDo website example developed based on Node. js, Express, and Jscex
- Use Jscex to improve JavaScript asynchronous programming experience
- Use HTML 5 and Javascript to design plotting programs
- 16 excellent JavaScript tutorials and library recommendations
- The inherent disability of JavaScript in Dart VS JavaScript