<html>
<head>
<title>初识canvas</title>
<script src="../js/jscex.jscexRequire.min.js" type="text/javascript"></script>
</head>
<body>
<canvas id="mc" width="900px" height="440px" style="border:1px solid #c3c3c3;background-color:#fff;border-radius:10px;">
</canvas>
<script type="text/javascript">
var canvas = document.getElementById('mc');
var ctx = canvas.getContext('2d');
var x = 150;
var y = 150;
var r = 100;
//画出指定的图像
var somethingAsync = eval(Jscex.compile("async",function(){
ctx.moveTo(x - r,y);
for(var i = x - r ; i< x+r+1;i++){
$await(Jscex.Async.sleep(50));
var tempY = Math.pow(r*r-(x-i)*(x-i),1/2);
ctx.lineTo(i,y+tempY);
ctx.stroke();
}
ctx.moveTo(x-r,y);
for(var i = x - r ; i< x+r+1;i++){
$await(Jscex.Async.sleep(50));
var tempY = Math.pow(r*r-(x-i)*(x-i),1/2);
ctx.lineTo(i,y-tempY);
ctx.stroke();
}
}))
somethingAsync().start();
</script>
</body>
</html>