0

我有一个球在画布上弹跳的代码我在 HTML 中创建 hte 画布，球代码在一个 .js 文件中。当我运行 html 文件时，球代码不起作用，但是当我将球代码放在 html 文件中的标签之间时，它确实起作用。任何人都看到它在 .js 文件中不起作用的原因是什么？

这是 HTML 文件：

<html> 
    <header> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>Bouncing Ball Paint</title> 
        <body>
            Welcome to Paint Brush! 
            Before you begin: Please type in a color, width, and speed. Now sit back and enjoy the show.</body>
        <body>
        <style> 
        #ball{background:#CCC;} 
        </style> 
    </header> 
    <body style="background-color:#FFDEAD;"> 
        Ball Width: <input type="text" id="lineWidth"></input> 
        Ball Color: <input type="text" id="lineColor"></input> 
        Ball Speed X:<input type="text" id="speedx"></input> 
        <input type="button" value="Clear" onClick="window.location.href=window.location.href"> 
        <input type="button" value="Green" id="green" onclick= "DGN.GreenRect()" />
        <div id="container"> 


        <canvas id="ball" width="1000" height="700"></canvas> 

        <script type="text/javascript" 

        src="balledit3.js"> </script>

    </body>
</html>

这是我试图在 .js 文件中包含但将在 html 中的标签之间工作的代码：

var x=50; 
var y=300; 
var dx=10; 
var dy=10; 

function draw(){ 
    var canvas = document.getElementById('ball'); 
    context= ball.getContext('2d'); 
    context.clearRect(0,0,canvas.width,canvas.height); 
    lineColor = (document.getElementById('lineColor').value.length>0)?document.getElementById('lineColor').value:'#0000FF'; 
    lineWidth = (document.getElementById('lineWidth').value.length>0)?document.getElementById('lineWidth').value:'10'; 
    context.beginPath(); 
    context.fillStyle=lineColor; 
    context.arc(x,y,lineWidth,20,Math.PI*2,true); 
    context.closePath(); 
    if (lineWidth){ 
        context.lineWidth=lineWidth; 
    } 
    if (lineColor){ 
        context.strokeStyle=lineColor; 
        context.stroke(); 
    } 
    context.fill(); 
    if( x<0 || x>1000) 
    dx=-dx; 
    if( y<0 || y>700) 
    dy=-dy; 
    x+=dx; 
    y+=dy; 
    fr = (document.getElementById('speedx').value>0)?document.getElementById('speedx').value:50; 
    setTimeout(draw,fr);   
} 
draw();
4

1 回答 1

1

清理你的 HTML，它似乎工作

<!DOCTYPE html>

<html>
    <head>
        <title>Bouncing Ball Paint</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style>#ball{background:#CCC;}</style> 
    </head>
    <body style="background-color:#FFDEAD;">
        <p>Welcome to Paint Brush!</p>
        <p>Before you begin: Please type in a color, width, and speed. Now sit back and enjoy the show.</p>
        <form id="container">
            <fieldset>
                <label>Ball Width:</label><input type="text" id="lineWidth" />
                <br />
                <label>Ball Color:</label><input type="text" id="lineColor" />
                <br />
                <label>Ball Speed X:<input type="text" id="speedx" />
            </fieldset>
            <input type="reset" value="Clear" />
            <input type="button" value="Green" id="green" onclick="javascript:DGN.GreenRect();" />
            <fieldset>
                <canvas id="ball" width="1000" height="700">This text is displayed if your browser does not support HTML5 Canvas.</canvas>
            </fieldset>
        </form>
        <script type="text/javascript" src="draw.js"></script>
    </body> 
</html>
于 2012-08-09T20:26:45.867 回答