<!DOCTYPE html>
<html>
<head>
<title>canvas example</title>
<meta charset="utf-8">
</head>
<body>
<canvas id="canvas" width="600px" height="600px" style="background: deeppink;"></canvas>
<script>
var canvas=document.getElementById("canvas");
var context=canvas.getContext('2d');
const WIDTH=canvas.width;
const HEIGHT=canvas.height;
function calculate(){
var r=Math.floor(Math.random()*256);
var g=Math.floor(Math.random()*256);
var b=Math.floor(Math.random()*256);
var x,y,R;
while(true){
x=WIDTH*Math.random();
y=HEIGHT*Math.random();
R=Math.min(Math.random()*HEIGHT,Math.random()*WIDTH);
if(x+R<=WIDTH&&y+R<=HEIGHT&&x>=R&&y>=R){
break;
}
}
context.beginPath();
context.strokeStyle="rgb("+r+","+g+","+b+")";
context.arc(x,y,R,0,Math.PI*2,false);
context.stroke();
setTimeout('calculate()',500);
}
calculate();
</script>
</body>
</html>
效果图如下所示：
