0 
<!doctype html>
<html>
<head>
<title>Canvas test</title>
</head>
<body>
<script type="text/javascript">
c = getElementById('canvas');
ctx = c.getContext("2d")'
ctx.fillRect(10,10,10,10);
</script>
<canvas id="canvas" height ="100" width = "100"></canvas>
</body>
</html>

Chrome と IE 9 でこれを試しましたが、どちらも何も表示されません。なぜこれがうまくいかないのか知っていますか？

それはおそらくばかげたことであり、私の友人はサインアップするのが面倒なのでこれを投稿するように頼んでいますが、私は自分でそれを理解できませんでした.

4

4 に答える 4

7

onloadコードを関数に入れる必要があります。

例えば：

window.onload = function() {
    c = document.getElementById('canvas');
    ctx = c.getContext("2d");
    ctx.fillRect(10,10,10,10);
};

これは、javascrpt コードがレンダリングの前に実行され、 afterwordsで実行する必要があるためです。<canvas>

デモ: http://jsfiddle.net/maniator/nCf7Y/

于 2012-11-27T16:56:13.997 に答える
4

構文エラー:

ctx = c.getContext("2d")'

への変更：

ctx = c.getContext("2d");

また、ドキュメント オブジェクトを使用する必要があります。

c = document.getElementById('canvas');
于 2012-11-27T16:56:38.247 に答える
3

「ドキュメント」がありません。

var c = document.getElementById('canvas');

于 2012-11-27T16:57:37.347 に答える
2

スクリプトの実行中、キャンバスは存在しません。タグの前になる<canvas>ようにタグを移動します。<script>

于 2012-11-27T16:56:21.360 に答える