如何使 JavaScript 畫布與其他畫布重疊

Question

 var canvas = document.getElementById('PongPad1'); // var canvasSize = document.getElementById("PongPad1").style.height; var PongPad1 = canvas.getContext('2d'); PongPad1.speed = 3; PongPad1.w = 50; PongPad1.h = 100; PongPad1.x = ""; PongPad1.y = ""; if(PongPad1.x == ""){ PongPad1.x = 20; } if(PongPad1.y == ""){ PongPad1.y = 20; } function draw() { PongPad1.fillStyle = 'black'; PongPad1.fillRect( PongPad1.x , PongPad1.y , PongPad1.w, PongPad1.h); } document.addEventListener('keydown', function(event) { if(event.keyCode == 38) { PongPad1.clearRect(PongPad1.x, PongPad1.y, PongPad1.w, PongPad1.h) if(PongPad1.y > 0){ PongPad1.y = PongPad1.y - PongPad1.speed; } draw(); //console.log(PongPad1.y); } }); document.addEventListener('keydown', function(event) { if(event.keyCode == 40) { PongPad1.clearRect(PongPad1.x, PongPad1.y, PongPad1.w, PongPad1.h); //Canvas hieght - PongPad1.h if(PongPad1.y < 175){ PongPad1.y = PongPad1.y + PongPad1.speed; } draw(); //console.log(PongPad1.y); } }); var canvas1 = document.getElementById('PongPad2'); // canvas.setAttribute('style', 'border: 1px solid; position: fixed; top: 8px; left: 8px; z-index: 0; width: 500px; height: 500px;'); var PongPad2 = canvas1.getContext('2d'); PongPad2.speed = 3; PongPad2.w = 50; PongPad2.h = 100; PongPad2.x = ""; PongPad2.y = ""; if(PongPad2.x == ""){ PongPad2.x = window.innerWidth - (40 + PongPad2.w); } if(PongPad2.y == ""){ PongPad2.y = 20; } function draw2() { PongPad2.fillStyle = 'black'; PongPad2.fillRect( PongPad2.x , PongPad2.y , PongPad2.w, PongPad2.h); } document.addEventListener('keydown', function(event) { if(event.keyCode == 87) { PongPad2.clearRect(PongPad2.x, PongPad2.y, PongPad2.w, PongPad2.h) if(PongPad2.y > 0){ PongPad2.y = PongPad2.y - PongPad2.speed; } draw2(); PongPad2.fillRect( PongPad2.x , PongPad2.y , PongPad2.w, PongPad2.h); } }); document.addEventListener('keydown', function(event) { if(event.keyCode == 83) { PongPad2.clearRect(PongPad2.x, PongPad2.y, PongPad2.w, PongPad2.h); //Canvas hieght - PongPad1.h if(PongPad2.y < 175){ PongPad2.y = PongPad2.y + PongPad2.speed; } draw2(); } }); var canvas2 = document.getElementById('ball'); var ball = canvas2.getContext('2d'); ball.speed = 1; ball.w = 10; ball.h = 10; ball.dx = ""; ball.dy = ""; if(ball.dx == ""){ ball.dx = 1 * (Math.round(Math.random()) * 2 - 1); } if(ball.dy == ""){ ball.dy = 1 * (Math.round(Math.random()) * 2 - 1); } ball.x = ""; ball.y = ""; if(ball.x == ""){ ball.x = 960; } if(ball.y == ""){ ball.y = -300; } function draw3() { ball.fillStyle = 'black'; ball.fillRect( ball.x , ball.y , ball.w, ball.h); } setInterval(() => { ball.clearRect( ball.x , ball.y , ball.w, ball.h); ball.x = ball.x + (ball.speed * ball.dx); ball.y = ball.y + (ball.speed * ball.dy); draw3(); if(ball.y < 0){ ball.dy = 1; } //Math.round(window.innerHeight/2) if(ball.y > 200){ ball.dy = -1; } draw3(); if(ball.x > window.innerWidth){ ball.dx = -1; ball.speed = 1; } if(ball.x < 0){ ball.dx = 1; ball.speed = 1; } if(PongPad1.x < ball.x + ball.w && PongPad1.x + PongPad1.w > ball.x && PongPad1.y < ball.y + ball.h && PongPad1.y + PongPad1.h > ball.y) { ball.dx = 1; //ball.speed++; } if(PongPad2.x < ball.x + ball.w && PongPad2.x + PongPad2.w > ball.x && PongPad2.y < ball.y + ball.h && PongPad2.y + PongPad2.h > ball.y) { ball.dx = -1; //ball.speed++; } //console.log(ball.y); }, 10); var test = window.innerWidth ; var test2 = window.innerHeight ; document.getElementById("test").textContent = "" + test + "," + test2 + "";

 <!DOCTYPE html> <html> <head> <link rel="icon" href="Pangea 8 logo 3.png" type="image/x-icon"> <meta name="keywords" content="Pangea 8"/> </head> <style> .work{ position: static; border: 3px solid #73AD21; } </style> <body id="body"> <p id ="test"> hello </p> <div > <canvas class = "work" id="ball" height = "469px" width = "1900px" ></canvas> <canvas class = "work" id="PongPad1" height = "275px" > </canvas> <canvas class = "work" id="PongPad2" height = "275px" width = "1900px" ></canvas> </div> </body></html>

^ 是我的乒乓球游戲。 使用 W,S 和 Up, Down 使槳出現。 我讓畫布有一個綠色邊框，這樣你就可以更好地看到它們。 我希望這些畫布在同一個平面上，而不是 3 個。它們不同步，我需要它們同步。 我怎樣才能讓它們重疊，使它們處於同一水平？

Answer 1

  position:absolute;
top:0;
left:0;

這創造了我想要的結果。

如何使 JavaScript 畫布與其他畫布重疊

問題描述

1 個解決方案

解決方案1
0 2022-05-17 17:58:26

如何使 JavaScript 畫布與其他畫布重疊

問題描述

1 個解決方案

解決方案1 0 2022-05-17 17:58:26

解決方案1
0 2022-05-17 17:58:26