html5--cavas画圆

来源:互联网 发布:淘宝购物券是什么 编辑:程序博客网 时间:2024/06/03 05:34

最近开始学习HTML5,在cavas随机生成点画圆。代码如下

<!DOCTYPE HTML><html><body><canvas id="myCanvas" width="300" height="300" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas><script type="text/javascript">var status=0; function showOrHide(){var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");var x=parseInt(Math.random()*(280-20+1)+20,10);var y=parseInt(Math.random()*(280-20+1)+20,10);if(status==0){show(cxt,x,y)status=1;}else{//hide(cxt,x,y)status=0;}}function show(cxt,x,y){cxt.fillStyle="#FF0000";cxt.beginPath();cxt.arc(x,y,15,0,Math.PI*2,true);cxt.closePath();cxt.fill();}function hide(cxt,x,y){cxt.fillStyle="#FFFFFF";cxt.beginPath();cxt.arc(x,y,16,0,Math.PI*2,true);cxt.closePath();cxt.fill();}setInterval("showOrHide()",100);</script></body></html>


0 0