var canvas = document.getElementById('drawhere');
function Player(x,y,w,h){
this.speed = 2;
this.x = x;
this.y = y;
this.width = typeof x !== 'undefined' ? w : 10;
this.height = typeof y !== 'undefined' ? h : 40;
function move(direction){
if (y > 0 && y < canvas.height){
this.y += (this.speed * direction);
}
}
}
function Ball(x,y){
this.x = typeof x !== 'undefined' ? x : canvas.width / 2;
this.y = typeof y !== 'undefined' ? y : canvas.height / 2;
this.direction = 1;
this.speed = 3;
}
player1 = new Player(30,30);
player2 = new Player(canvas.width - 30,30)
ball = new Ball();
function draw(){
var canvas = document.getElementById('drawhere');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.fillRect(player1.x,player1.y,player1.width,player1.height);
ctx.fillRect(player2.x,player2.y,player2.width,player2.height);
ctx.beginPath();
ctx.arc(ball.x,ball.y,5,Math.pi*2,true)
ctx.closePath();
ctx.stroke();
ctx.fill();
}
}
那是我的外部JS文件，这是我的html
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<!-- Use the .htaccess and remove these lines to avoid edge case issues.
More info: h5bp.com/i/378 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<!-- Mobile viewport optimized: h5bp.com/viewport -->
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->
<link rel="stylesheet" href="css/style.css">
<!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->
<!-- All JavaScript at the bottom, except this Modernizr build.
Modernizr enables HTML5 elements & feature detects for optimal performance.
Create your own custom Modernizr build: www.modernizr.com/download/ -->
<script src="js/libs/modernizr-2.5.3.min.js"></script>
<script src="js/pong/main.js"></script>
</head>
<body>
<!-- Prompt IE 6 users to install Chrome Frame. Remove this if you support IE 6.
chromium.org/developers/how-tos/chrome-frame-getting-started -->
<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
<header>
</header>
<div role="main">
<canvas id="drawhere" width="400" height="300"></canvas>
<script>window.onload = draw();</script>
</div>
<footer>
</footer>
<!-- JavaScript at the bottom for fast page loading -->
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"></script>')</script>
<!--pong -->
<!-- scripts concatenated and minified via build script -->
<script src="js/plugins.js"></script>
<script src="js/script.js"></script>
<!-- end scripts -->
</body>
</html>
出于某种原因，我一直得到一个空对象canvas我想因为我只在加载文档后调用它，所以我会没事的。这是我第一个真正的JS项目，所以我可能做错了一些简单的错误。很抱歉格式不佳，编辑器遇到了一些麻烦。
JS文件开头的代码在加载JS文件后立即执行，这可能是在DOM准备就绪之前。为了防止这种情况，请确保 JS 文件中的所有内容都属于一个函数，并在加载中使用该函数。
希望这有帮助。