1

私のcanvas要素が正しく機能していません。長方形は描画されません。問題の診断を手伝ってください。問題がどこにあるのかわかりません。それは私のcss、javascript、またはhtmlですか？デバッガーを実行してサーバーに配置したときにエラーが発生しなかったため、すべてを正しく設定しましたか？

index.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>

style.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;
}

game.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);
}
4

1 に答える 1

0

ライブデモ

イベントリスナー用にに変更documentするwindowと、機能するはずです。

window.addEventListener('load',drawRect,false);
于 2012-05-02T12:48:36.943 に答える