如何使 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>

^ Is my Pong game. ^ 是我的乒乓球游戏。 Use W,S and Up, Down to make the paddles appear.使用 W,S 和 Up, Down 使桨出现。 I made the canvases have a green border so you can see them better.我让画布有一个绿色边框，这样你就可以更好地看到它们。 I want these canvases to be on the same plane, instead of the 3. They are not in synch, I need them to be.我希望这些画布在同一个平面上，而不是 3 个。它们不同步，我需要它们同步。 How can I make them overlap so they are on the same level?我怎样才能让它们重叠，使它们处于同一水平？

Answer 1

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

this created my desired outcome.这创造了我想要的结果。

如何使 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