HTMLとJavascriptを使用してキャンバスを作成できません

私はコーディングとこのサイトの両方に新しく、実際には問題はありませんでした。HTMLとJavascriptを使用してキャンバスを作成できません

私は、JavaScriptを使用してテトリスをコードするビデオに従っています。最初は、p5.jsエディタを使用してコーディングを行っていましたが、私は多くの問題に遭遇していました。

私はAtomエディタにビデオと同様の機能を持つように見えたので、私は絶対初心者です。私ができることは最高です。

コードは次のとおりです。問題はそれが240x400のキャンバスを作成することになっていることです.p5.jsではそうしていますが、どこにでもありません。私は最初にNode.jsを使ってコードのプレビューを取得しようとしましたが、それは空白になりました。今私はAtomでライブHTMLプレビューパッケージを使用していますが、これも空白になります。

<html> 
<head> 
<title>Tetris</title> 
</head> 
<body> 
<canvas id="tetris" width="240" height="400"></canvas> 
<script src="tetris.js"></script> 
</body> 
</html>

ここで参照するJavascriptのソースは以下のとおりです。

const canvas = document.getElementById('tetris'); 
const context = canvas.getContext('2d'); 

context.fillStyle = '#000'; 
context.fillRect(0, 0, canvas.width, canvas.height);

私はどのようにこの問題を解決するには、no手掛かりを得なかっきた、と私はここにいない投稿は、まったく使用されるであろうと確信しているが、私は、これはで動作するように取得しようとしている私の髪を引き裂くしてきました単に私をフォローすることができるエディターであり、悲しいことに協力したくありません。

ご協力いただきありがとうございます。

出典

2017-11-27 AkiraG

ブラウザでF12キーを押して、開発者コンソールにアクセスします。それは何と言いますか？ – Coreus

コードは正しいです。あなたは、ページが完全に読み込まれるまで、あなたの図面を待って試みることができる：あなたがよく書かれている

document.addEventListener("DOMContentLoaded", function() { 
    const canvas = ... 
    ... 
});

出典

2017-11-27 10:42:38 RecencyEffect

document.addEventListener("DOMContentLoaded", function() { 
const canvas = document.getElementById('tetris'); 
const context = canvas.getContext('2d'); 

context.fillStyle = '#000'; 
context.fillRect(0, 0, canvas.width, canvas.height); 
})

、それは、ブラックボックスを作成し、あなたのためにこの作品を願っています。

出典

2017-11-27 10:44:04

HTMLとJavascriptを使用してキャンバスを作成できません

答えて

関連する問題