2017.12.7

来源：互联网发布：淘宝联盟手机返利编辑：程序博客网时间：2024/06/06 00:11

canvas demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>泡泡特效</title>
<style>
    *{
   margin:0;
   padding:0;
   }
    canvas{
   display:block;
   background-color:#000000;
   }
   </style>
</head>

<body>
    <canvas id="Bubble"></canvas>
<script>
   var canvas = document.getElementById("Bubble");
   canvas.width = innerWidth;
   canvas.height = innerHeight;
   window.onresize = function(){
                                   canvas.width = innerWidth;
                                   canvas.height = innerHeight;
                                  }
   var ctx = canvas.getContext("2d");
   setInterval("runCircle()",1000/2);

   function runCircle(){
   ctx.clearRect(0,0,innerWidth,innerHeight);
   var count = 0;
   do{
   randomCircle();
   count++;
   }while(count<200);
   }
   function randomCircle(){
   var r = Math.floor(Math.random()*255);
        r = r.toString(16);
   var g = Math.floor(Math.random()*255);
        g = g.toString(16);
   var b = Math.floor(Math.random()*255);
        b = b.toString(16);
   var rgb = "#"+r+g+b;
   var x = Math.floor(Math.random()*innerWidth);
   var y = Math.floor(Math.random()*innerHeight);
   var radius = Math.floor(Math.random()*20)
   ctx.fillStyle = rgb;
   ctx.beginPath();
   ctx.arc(x,y,radius,0,2*Math.PI,true);
   ctx.closePath();
   ctx.fill();
   }


</script>
</body>
</html>

阅读全文

0 0