Evet hocalarım bu kodu ortalamayı beceremedim bilen birisi yardım edebilirmi ?
Kod:
<html>
*********
#myCanvas {
border: 0;
z-index: 1;
position: absolute;
left: 0px;
top: 0px;
}
#myCanvas2 {
border: 0;
z-index: 0;
position: absolute;
left: 0px;
top: 0px;
}
#myCanvas3 {
border: 0;
z-index: 2;
position: absolute;
left: 0px;
top: 0px;
}
</style>
<canvas id="myCanvas" width="800" height="800"></canvas>
<canvas id="myCanvas2" width="800" height="800"></canvas>
<canvas id="myCanvas3" width="800" height="800"></canvas>
<script>
let canvas = ********.getElementById('myCanvas');
let context = canvas.getContext('2d');
let canvas2 = ********.getElementById('myCanvas2');
let context2 = canvas2.getContext('2d');
let canvas3 = ********.getElementById('myCanvas3');
let context3 = canvas3.getContext('2d');
context2.beginPath();
context2.fillStyle = 'gray';
context2.fillRect(0, 0, 800, 800);
context2.rect(0, 0, 800, 800);
context2.stroke();
context.lineLength = 10;
context2.lineLength = 10;
class cizgi {
constructor(x, y, renk) {
this.x = x;
this.y = y;
this.renk = renk;
}
}
var dizi = [];
var dizi2 = [];
var dizi3 = [];
var dizi4 = [];
var charDizi = [];
let control = 0;
let fpsControl = 0;
charDizi[0] = "6";
charDizi[1] = "6";
charDizi[2] = "6";
charDizi[3] = "e";
charDizi[4] = "n";
charDizi[5] = "d";
charDizi[6] = "9";
charDizi[7] = "9";
charDizi[8] = "9";
var charKontrol = 0;
let region = new Path2D();
region.arc(400, 400, 200, 0, 360);
setInterval(function() {
if (fpsControl % 6000 == 0) {
context.clearRect(0, 0, 800, 800);
context2.clearRect(0, 0, 800, 800);
}
if (fpsControl % 30 == 0) {
if (dizi3.length < 30) {
if (control % 2 == 0) {
dizi3.push(new cizgi(650, 350, 'black'));
} else {
dizi3.push(new cizgi(650, 350, 'white'));
}
}
}
for (let i = 0; i < dizi3.length; i++) {
if (dizi3[i] != null) {
if (dizi3[i].x < 400) {
dizi3[i] = null;
dizi3.splice(i, 1);
i--;
} else {
dizi3[i].x -= 30 / 60;
dizi3[i].y -= 8.42 / 12;
context.beginPath();
context.strokeStyle = dizi3[i].renk;
context.moveTo(400, 400 - dizi3[i].y);
context.lineTo(dizi3[i].x, 400);
context.lineTo(400, 400 + (dizi3[i].y));
context.stroke();
}
}
}
if (fpsControl % 30 == 0) {
if (dizi4.length < 30) {
if (control % 2 == 0) {
dizi4.push(new cizgi(150, 350, 'black'));
} else {
dizi4.push(new cizgi(150, 350, 'white'));
}
}
control++;
}
for (let i = 0; i < dizi4.length; i++) {
if (dizi4[i] != null) {
if (dizi4[i].x > 400) {
dizi4[i] = null;
dizi4.splice(i, 1);
i--;
} else {
dizi4[i].x += 30 / 60;
dizi4[i].y -= 8.42 / 12;
context.beginPath();
context.strokeStyle = dizi4[i].renk;
context.moveTo(400, 400 - dizi4[i].y);
context.lineTo(dizi4[i].x, 400);
context.lineTo(400, 400 + (dizi4[i].y));
context.stroke();
}
}
}
if (fpsControl % 30 == 0) {
if (dizi.length < 60) {
if (control % 2 == 0) {
dizi.push(new cizgi(400, 0, 'black'));
} else {
dizi.push(new cizgi(400, 0, 'white'));
}
}
}
if (fpsControl % 30 == 0) {
context3.clearRect(0, 0, 800, 800);
context3.font = "800 25px Helvetica";
context3.shadowOffsetX = 4;
context3.shadowOffsetY = 4;
context3.shadowColor = "rgba(0,0,0,0.8)";
context3.fillText(charDizi[charKontrol], 391, 409);
context3.fillStyle = "white";
charKontrol++;
if(charKontrol==charDizi.length)
{
charKontrol=0;
}
}
for (let i = 0; i < dizi.length; i++) {
if (dizi[i] != null) {
if (dizi[i].x > 1600) {
/* dizi[i] = null;
dizi.splice(i, 1);
i--;*/
dizi[i].x = 400;
dizi[i].y = 0;
console.log("fps:" + dizi.length);
} else {
dizi[i].x += 50 / 60;
dizi[i].y += 31.25 / 60;
context2.beginPath();
context2.strokeStyle = dizi[i].renk;
context2.moveTo(400, 400 - dizi[i].y);
context2.lineTo(dizi[i].x, 400);
context2.lineTo(400, 400 + (dizi[i].y));
context2.stroke();
}
}
}
if (fpsControl % 30 == 0) {
if (dizi2.length < 60) {
if (control % 2 == 0) {
dizi2.push(new cizgi(400, 0, 'black'));
} else {
dizi2.push(new cizgi(400, 0, 'white'));
}
}
}
for (let i = 0; i < dizi2.length; i++) {
if (dizi2[i] != null) {
if (dizi2[i].x < -800) {
dizi2[i].x = 400;
dizi2[i].y = 0;
} else {
dizi2[i].x -= 50 / 60;
dizi2[i].y += 31.25 / 60;
context2.beginPath();
context2.strokeStyle = dizi2[i].renk;
context2.moveTo(400, 400 + dizi2[i].y);
context2.lineTo(dizi2[i].x, 400);
context2.lineTo(400, 400 - (dizi2[i].y));
context2.stroke();
}
}
}
fpsControl++;
}, 4)
context.clip(region, "evenodd");
//Anim 32
</script>
</html>
