为什么我的画布不会画

Why won't my canvas draw?

本文关键字：布不会 我的 为什么      更新时间：2023-09-26

我的画布元素无法正常工作。它不会绘制矩形。请帮我诊断问题。我不知道问题出在哪里，是我的css，javascript还是html？我是否设置了一切，因为我在运行调试器并将其放在服务器上时没有收到任何错误？

索引.html

<!DOCTYPE html>
<html>
<head>
<title>Paco Developement</title>
<link rel="stylesheet" href="style.css" />
<script src="game.js"></script>
</head>
<body>
<canvas id="canvasBg" height="500" width="800"></canvas>
<canvas id="character" height="500" width="800"></canvas>
</body>
</html>

风格.css

* {
padding:0px;
margin:0px;
}
header, section, footer, aside, nav, article, figure, hgroup{
    display:block;
}
body {
background:#BADA55;
width:100%;
height:100%;
}
#canvasBg {
display:block;
background:#fff;
margin:100px auto 0px;
}
#character {
display:block;
margin:-500px auto 0px;
}

游戏.js

var canvasBg = document.getElementById('canvasBg');
var bgCtx = canvasBg.getContext("2d");
document.addEventListener('load',drawRect,false);
function drawRect(){
bgCtx.fillStyle="#FF0000";
bgCtx.fillRect(0,0,150,75);
}

现场演示

将事件侦听器的document更改为window，它应该适合您。

window.addEventListener('load',drawRect,false);
相关文章：