programmering:cirkel2-js-code
<!DOCTYPE html>
<HTML>
<HEAD> <meta charset="utf-8"></HEAD>
<BODY>
<canvas id="screen" style="border:0px solid #000000;" width="600" height="600">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
function rand(n) {
return Math.floor((Math.random()*n));
}
var canvas=document.getElementById("screen");
var ctx=canvas.getContext("2d");
var width=canvas.width;
var height=canvas.height;
var centerX=width/2;
var centerY=height/2;
var radius=width/2;
function drawOne(size) {
ctx.beginPath();
ctx.arc(centerX,centerY,radius,0,Math.PI*2,true);
ctx.stroke();
for (var i=0; i<24; i++) {
var angle=(2*Math.PI/24)*i;
var x=centerX+Math.cos(angle)*(radius-size);
var y=centerY+Math.sin(angle)*(radius-size);
ctx.beginPath();
ctx.arc(x,y,size,0,Math.PI*2,true);
ctx.stroke();
}
}
function draw() {
ctx.clearRect(0,0,width,height);
for (var i=2; i<j; i+=2) {
drawOne(factor*radius/i);
}
j=j+direction;
if (j>20) {
direction=-1;
}
if (j<2) {
direction=1;
factor=rand(10)+1;
}
}
var j=3;
var factor=1;
var direction=1;
var v=setInterval(draw,50);
</script>
</BODY>
</HTML>
programmering/cirkel2-js-code.txt · Last modified: 2023/10/21 19:19 by 127.0.0.1