programmering:yinyang1-js-code
<!DOCTYPE html>
<HTML>
<HEAD><meta charset="utf-8"></HEAD>
<BODY>
<canvas id="screen" style="border:0px solid #000000;" width="640" height="640">
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;
var angle=0;
var direction=1;
var speed=1;
var v=setInterval(rotate,25);
function drawLeftPart() {
ctx.beginPath();
ctx.linewidth=5;
ctx.strokeStyle="black";
// big circle left-half
ctx.arc(centerX,centerY,radius,Math.PI/2,3*Math.PI/2,false);
//lower half-circle
ctx.arc(centerX,3*centerY/2,radius/2-1,3*Math.PI/2,Math.PI/2,true);
//upper half-circle
ctx.arc(centerX,centerY/2,radius/2,3*Math.PI/2,Math.PI/2,false);
ctx.closePath();
ctx.fillStyle="black";
ctx.fill();
}
function drawRightPart() {
ctx.beginPath();
ctx.arc(centerX,centerY,radius,Math.PI/2,3*Math.PI/2,true);
ctx.stroke();
}
function drawBlackEye() {
// black eye
ctx.beginPath();
ctx.arc(centerX,3*centerY/2,radius/10,0,Math.PI*2,false);
ctx.closePath();
ctx.fill();
}
function drawWhiteEye() {
// white eye
ctx.beginPath();
ctx.arc(centerX,centerY/2,radius/10,0,Math.PI*2,false);
ctx.fillStyle="white";
ctx.closePath();
ctx.fill();
}
function yinyang() {
drawLeftPart();
drawRightPart();
drawBlackEye();
drawWhiteEye();
}
function rotate() {
angle+=speed*0.02*direction;
ctx.clearRect(0,0,width,height);
ctx.save();
ctx.translate(centerX, centerY);
ctx.rotate(angle);
ctx.translate(-centerX, -centerY);
yinyang();
ctx.restore();
if (rand(200)==5) {
direction=-direction;
speed=rand(5)+1;
}
if (rand(50)==5) {
speed+=2;
}
}
</script>
</BODY>
</HTML>
programmering/yinyang1-js-code.txt · Last modified: 2023/10/21 19:19 by 127.0.0.1