I. Introduction
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 ··
Ii. Circle
Execute the following code in a browser that supports html5:
- >
-
- <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!
- >
-
- <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!