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 に答える