我正在尝试使用HTML5画布和节点制作在线多人.io游戏.js我需要将播放器放在画布上，但是当我尝试像往常一样将图像添加到画布上时，没有任何显示，我怀疑这与从服务器发送的文件有关。有谁知道怎么能做到这一点？该文件称为PP.png(代表棱镜播放器(，它位于名为IMG的文件夹中，而脚本位于名为JS的文件夹中。
我的网页
<!DOCTYPE html>
<html lang='en'>
<head>
<title>rainboz.io</title>
<link rel="stylesheet" href='client/styles/main.css' type="text/css">
<div id="canvo-container"> <!-- Canvas container outside of container div -->
<canvas id='canvo'></canvas>
</div>
<script src='client/js/script.js'></script>
<script src='https://cdn.socket.io/socket.io-1.4.5.js'></script>
</head>
<body>
<!--title-->
<div id="container">
<!--changelog-->
<h2 id='changeot'>Changelog</h2>
<h2 id="changein">Changelog</h2>
<!--last upadated-->
<h2 id='lastupot'>Last Updated: June 22, 2020</h2>
<h2 id="lastupin">Last Updated: June 22, 2020</h2>
<!--upadates-->
<p id='toppot'>
- I just created this changelog,<br/>
this is where chages will go whenever I make them but <br/>
I dont have any yet.
</p>
<p id='toppin'>
- I just created this changelog,<br/>
this is where chages will go whenever I make them but <br/>
I dont have any yet.
</p>
<!--updates 2-->
<p id='midpot'>
- I barely even know how to code at all,<br/>
so I'm kinda just winging it for now <br/>
I'll just look up how to do stuff as I go.
</p>
<p id='midpin'>
- I barely even know how to code at all,<br/>
so I'm kinda just winging it for now <br/>
I'll just look up how to do stuff as I go.
</p>
<h2 id="versionnumot">Version Number: 01.03.02</h2>
<h2 id='versionnumin'>Version Number: 01.03.02</h2>
<h2 id='cinfoot'>Contact | About</h2>
<h2 id='cinfoin'>Contact | About</h2>
<!--nickname and play button-->
<div class='ctr'>
<h1 id='outer'>rainboz.io</h1>
<h1 id='inner'>rainboz.io</h1>
</div>
<div>
<label id='spawnif'>this is the story of...</label>
<label id='spawnifin'>this is the story of...</label>
<input type='text' spellcheck='false' maxlength="20" autocomplete="off" id='nickname' placeholder="Nickname">
<button id='playbtnot' onclick="myFunction()">Play</button>
<button id='playbtnin' onclick="myFunction()">Play</button>
</div>
<form>
<button id='rbtn'></button>
<button id='dbtn'></button>
<button id='ibtn'></button>
<button id='tbtn'></button>
</form>
<button id='mgbtnot'>More Games</button>
<button id='mgbtnin'>More Games</button>
</div>
</body>
</html>
我的 CSS
body {
margin: 0;
padding: 0;
background-image: url(trianglebg.png);
background-size: 475px;
background-color: rgb(245, 245, 245);
overflow: hidden;
}
#container {
transition: 0.6s;
width: 100vw;
}
#canvo-container {
display: none;
}
#canvo {
}
@font-face {
font-family: 'coconbold';
src: url(Cocon-Bold-Font.otf);
font-style: normal;
font-weight: 100;
}
@font-face {
font-family: 'coconregular';
src: url(cocon-regular.otf);
font-style: normal;
font-weight: 100;
}
@font-face {
font-family: 'coconlight';
src: url(cocon-light.ttf);
font-style: normal;
font-weight: 100;
}
#outer {
text-align: center;
position: absolute;
margin: 0;
padding: 0;
color: black;
font-size: 7rem;
font-family: coconbold;
font-weight: 100;
transform: translateX(-50%);
-webkit-text-stroke: 20px black;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#inner {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
position: absolute;
margin: 0;
padding: 0;
font-family: coconbold;
font-weight: 100;
transform: translateX(-50%);
font-size: 7rem;
background: linear-gradient(45deg, rgba(255, 40, 40, 1) 15%, rgba(255, 121, 4, 1) 27%, rgba(252, 241, 73, 1) 40%, rgba(82, 252, 73, 1) 50%, rgba(73, 197, 252, 1) 60%, rgba(106, 53, 255, 1) 73%, rgba(150, 0, 214, 1) 85%);
background-size: 200%;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
animation: anim 4s linear infinite alternate;
}
@keyframes anim {
from {
background-position: 0%;
}
to {
background-position: 100%;
}
}
#nickname {
box-align: center;
position: absolute;
border-radius: 90px;
top: 40%;
left: 50%;
margin: 0;
padding: 3px 10px 0 9px;
transform: translateX(-50%);
width: 30%;
height: 8%;
outline: none;
font-size: 50px;
font-weight: 1px;
border-color: lightgrey;
background-color: rgb(247, 247, 247);
border-width: 1px;
font-family: coconbold;
border-style: solid;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
caret-color: grey;
animation-name: float-up-3;
animation-duration: 2s;
}
input::placeholder {
color: transparent;
}
#spawnif {
box-align: center;
position: absolute;
border-radius: 90px;
top: 36%;
left: 50%;
margin: 0;
padding: 0;
transform: translateX(-50%);
font-size: 20px;
font-family: coconbold;
color: black;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-stroke: 6px black;
animation-name: float-up-2;
animation-duration: 2s;
}
#spawnifin {
box-align: center;
position: absolute;
border-radius: 90px;
top: 36%;
left: 50%;
margin: 0;
padding: 0;
transform: translateX(-50%);
font-size: 20px;
font-family: coconbold;
color: rgb(245, 244, 244);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
animation-name: float-up-2;
animation-duration: 2s;
}
#playbtnin {
box-align: center;
position: absolute;
border-radius: 90px;
width: 215px;
height: 50px;
top: 50%;
left: 50%;
margin: 0;
padding: 0;
transform: translateX(-50%);
font-size: 35px;
font-family: coconbold;
color: white;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border-color: transparent;
border-style: solid;
border-width: 3px;
outline: none;
animation-name: float-up-1;
animation-duration: 2s;
}
#playbtnot {
box-align: center;
position: absolute;
border-radius: 90px;
width: 215px;
height: 50px;
top: 50%;
left: 50%;
margin: 0;
padding: 0;
transform: translateX(-50%);
font-size: 35px;
font-family: coconbold;
color: white;
background-color: rgb(180, 179, 255);
border-color: rgb(110, 107, 255);
background-size: 500px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-style: solid;
border-width: 3px;
outline: none;
animation-name: float-up-1;
animation-duration: 2s;
-webkit-text-stroke: 6px black;
}
#playbtn:hover {
background-color: rgb(161, 171, 255);
border-color: rgb(103, 101, 255);
}
.ctr {
position: absolute;
top: 15%;
left: 50%;
animation-name: float-in;
animation-duration: 2s;
}
@keyframes float-in {
from {
top: -50%;
}
to {
top: 15%;
}
}
@keyframes float-up-1 {
from {
top: 150%;
}
to {
top: 50%;
}
}
@keyframes float-up-2 {
from {
top: 140%;
}
to {
top: 36%;
}
}
@keyframes float-up-3 {
from {
top: 150%;
}
to {
top: 40%;
}
}
#changeot {
box-align: center;
position: absolute;
border-radius: 90px;
top: 10px;
left: 7%;
margin: 0;
padding: 0;
transform: translateX(-50%);
font-size: 33px;
font-family: coconbold;
color: black;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-stroke: 5px black;
}
#changein {
box-align: center;
position: absolute;
border-radius: 90px;
top: 10px;
left: 7%;
margin: 0;
padding: 0;
transform: translateX(-50%);
font-size: 33px;
font-family: coconbold;
color: rgb(245, 244, 244);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#lastupin {
box-align: center;
position: absolute;
border-radius: 90px;
top: 48px;
left: 9.5%;
margin: 0;
padding: 0;
transform: translateX(-50%);
font-size: 18px;
font-family: coconregular;
color: rgb(245, 244, 244);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#lastupot {
box-align: center;
position: absolute;
border-radius: 90px;
top: 48px;
left: 9.5%;
margin: 0;
padding: 0;
transform: translateX(-50%);
font-size: 18px;
font-family: coconregular;
color: black;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-stroke: 5px black;
}
#toppin {
box-align: center;
position: absolute;
border-radius: 90px;
top: 90px;
left: 13%;
margin: 0;
padding: 0;
transform: translateX(-50%);
font-size: 13px;
font-family: coconregular;
color: rgb(245, 244, 244);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#toppot {
box-align: center;
position: absolute;
border-radius: 90px;
top: 90px;
left: 13%;
margin: 0;
padding: 0;
transform: translateX(-50%);
font-size: 13px;
font-family: coconregular;
color: black;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-stroke: 4px black;
}
#midpin {
box-align: center;
position: absolute;
font-size: 13px;
border-radius: 90px;
top: 150px;
left: 9.5%;
margin: 0;
padding: 0;
transform: translateX(-50%);
font-family: coconregular;
color: rgb(245, 244, 244);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#midpot {
box-align: center;
position: absolute;
font-size: 13px;
border-radius: 130px;
top: 150px;
left: 9.5%;
margin: 0;
padding: 0;
transform: translateX(-50%);
font-family: coconregular;
color: black;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-stroke: 4px black;
}
#versionnumin {
box-align: center;
position: absolute;
border-radius: 90px;
top: 635px;
left: 11.25%;
margin: 0;
padding: 0;
transform: translateX(-50%);
font-size: 24px;
font-family: coconregular;
color: rgb(245, 244, 244);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#versionnumot {
box-align: center;
position: absolute;
border-radius: 90px;
top: 635px;
left: 11.25%;
margin: 0;
padding: 0;
transform: translateX(-50%);
font-size: 24px;
font-family: coconregular;
color: black;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-stroke: 5px black;
}
#rbtn {
box-align: center;
position: absolute;
border-radius: 10px;
width: 50px;
height: 50px;
top: 600px;
left: 1150px;
margin: 0;
padding: 0;
transform: translateX(-50%);
font-size: 35px;
font-family: coconbold;
color:white;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: rgb(253, 135, 106);
border-color: rgb(255, 31, 2);
border-style: solid;
border-width: 3px;
outline: none;
}
#dbtn {
box-align: center;
position: absolute;
border-radius: 10px;
width: 50px;
height: 50px;
top: 600px;
left: 1210px;
margin: 0;
padding: 0;
transform: translateX(-50%);
font-size: 35px;
font-family: coconbold;
color:white;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: rgb(189, 204, 255);
border-color: rgb(109, 112, 255);
border-style: solid;
border-width: 3px;
outline: none;
}
#ibtn {
box-align: center;
position: absolute;
border-radius: 10px;
width: 50px;
height: 50px;
top: 600px;
left: 1270px;
margin: 0;
padding: 0;
transform: translateX(-50%);
font-size: 35px;
font-family: coconbold;
color:white;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: rgb(165, 117, 255);
border-color: rgb(120, 2, 255);
border-style: solid;
border-width: 3px;
outline: none;
}
#tbtn {
box-align: center;
position: absolute;
border-radius: 10px;
width: 50px;
height: 50px;
top: 600px;
left: 1330px;
margin: 0;
padding: 0;
transform: translateX(-50%);
font-size: 35px;
font-family: coconbold;
color:white;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: rgb(148, 207, 255);
border-color: rgb(0, 110, 255);
border-style: solid;
border-width: 3px;
outline: none;
}
#cinfoin {
box-align: center;
position: absolute;
border-radius: 90px;
top: 12px;
right: -6%;
margin: 0;
padding: 0;
transform: translateX(-50%);
font-size: 25px;
font-family: coconregular;
color: rgb(245, 244, 244);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#cinfoot {
box-align: center;
position: absolute;
border-radius: 90px;
top: 12px;
right: -6%;
margin: 0;
padding: 0;
transform: translateX(-50%);
font-size: 25px;
font-family: coconregular;
color: black;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-stroke: 5px black;
}
#mgbtnot {
box-align: center;
position: absolute;
border-radius: 25px;
width: 150px;
height: 40px;
top: 7px;
left: 1095px;
margin: 0;
padding: 0;
transform: translateX(-50%);
font-size: 19px;
font-family: coconbold;
color:white;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: rgb(159, 255, 151);
border-color: rgb(61, 167, 57);
border-style: solid;
border-width: 3px;
outline: none;
-webkit-text-stroke: 4px black;
}
#mgbtnin {
box-align: center;
position: absolute;
border-radius: 25px;
width: 150px;
height: 40px;
top: 7px;
left: 1095px;
margin: 0;
padding: 0;
transform: translateX(-50%);
font-size: 19px;
font-family: coconbold;
color:white;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border-color:transparent;
border-style: solid;
border-width: 3px;
outline: none;
}
我的服务器(节点.js(
var express = require('express');
var app = express();
var serv = require('http').Server(app);
app.get('/', function(req, res) {
res.sendFile(__dirname + '/client/index.html');
});
app.use('/client',express.static(__dirname + '/client/'
));
serv.listen(2000);
console.log('Server started.');
我的脚本(游戏(
var canvas = document.getElementById('canvas');
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
console.log(canvas);
var image = new Image();
image.src = 'client/img/pp.png';
ctx.drawImage(image, 100, 100, 50, 50);
ctx.fillRect(200, 200, 200, 200);
function myFunction() {
document.getElementById('container').style.opacity = "0";
setTimeout(func2, 650)
}
function func2() {
document.getElementById('canvo-container').style.display = "block";
}
您正在定义变量"canvas"：
var canvas = document.getElementById('canvas');var canvas = document.querySelector('canvas');
两次第一次使用 ID 和没有元素请注意，第二次document.querySelector('canvas');放在这里时，您需要指定您指的是什么类型的标签，另一方面，没有称为"canvas"的 Id，而是您有<canvas id='canvo'></canvas>，名称错误。
图像未显示的原因是它尚未加载。
var image = new Image();
image.src = 'client/img/pp.png'; // starts to load the image
ctx.drawImage(image, 100, 100, 50, 50); // May or may not have loaded at this point
// If not loaded nothing is drawn
若要确保映像已加载，应通过为其分配函数来使用onload事件。
var image = new Image();
image.src = 'client/img/pp.png'; // starts to load the image
image.onload = () => {
ctx.drawImage(image, 100, 100, 50, 50); // image has loaded and can be drawn
}
或者更好地使用addEventListener并侦听load事件
var image = new Image();
image.src = 'client/img/pp.png'; // starts to load the image
image.addEventListener("load", () => {
ctx.drawImage(image, 100, 100, 50, 50); // image has loaded and can be drawn
}, {once: true})
还有一个error事件，如果获取图像时出现问题，它将触发该事件。这将允许应用程序的正常失败(可能是重试(，而不仅仅是不工作。