Home > Developer > JavaScript
Draw a circle today!
Execute the following code in a browser that supports 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>
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 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>
In this way, you can witness the entire process of circle painting!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
