programmering:bird2-js-code
<HTML>
<TITLE>Bird 2</TITLE>
<BODY>
<canvas id="canvas" style="border:0px solid #000000;" width="1200" height="600">Your browser does not support the HTML5 canvas tag.</canvas>
<script>
function func1_x(i,l) {
var x=Math.sin(l*Math.PI*i/2000);
return 3*x*x*x
}
function func1_y(i,l) {
return -Math.cos(6*Math.PI*i/2000);
}
function func2_x(i) {
var x=Math.sin(l*2*Math.PI*i/2000)
return (3/2)*x*x*x;
}
function func2_y(i) {
return (-1/2)*Math.cos(6*l*Math.PI*i/2000);
}
function cls() {
ctx.save();
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.fillStyle="white";
ctx.clearRect(0, 0, width, height);
ctx.restore();
}
function draw() {
cls();
l=(l+0.05*direction);
if (l>5) { direction=-1; }
if (l<2) { direction=1; }
for (var k=1; k<=1000; k++) {
ctx.beginPath();
ctx.moveTo(func1_x(k,l),func1_y(k,l));
ctx.lineTo(func2_x(k,l),func2_y(k,l));
ctx.stroke();
ctx.beginPath();
ctx.moveTo(-func1_x(k,l),func1_y(k,l));
ctx.lineTo(-func2_x(k,l),func2_y(k,l));
ctx.stroke();
}
requestAnimationFrame(draw);
}
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var width=canvas.width;
var height=canvas.height;
var l=2;
var direction=1;
ctx.strokeStyle="black";
ctx.rect(0,0,width,height);
ctx.stroke();
ctx.translate(width/2,height/2);
ctx.scale(width/6,height/2);
ctx.lineWidth = 1/(width/6);
draw();
</script>
</BODY>
</HTML>
programmering/bird2-js-code.txt · Last modified: 2023/10/21 19:19 by 127.0.0.1