在java腳本中繪製一條弧線，但它不出現

我正在處理一個簡單的html/js項目以獲得一個可以在可以拍攝球的畫布中移動的框。我得到了箱子移動，但我不能讓球出現。該程序使它到drawBall（）和moveBall（）（測試使用警報）功能，但他們什麼都不做。我在過去的一個小時裏一直在努力工作，所以我無法實現它。這裏是我的JavaScript代碼，它移動框，並且應該在空格鍵被釋放時畫一個球。在java腳本中繪製一條弧線，但它不出現

function init() { 
//canvas = document.getElementById('canvas'); 
context = $('#canvas')[0].getContext('2d'); 
WIDTH = $('#canvas').width(); 
HEIGHT = $('#canvas').height(); 
block_x = WIDTH/2; 
block_y = HEIGHT/2; 
setInterval('draw()', 25); 
} 

function clearCanvas() { 
    context.clearRect(0,0,WIDTH,HEIGHT); 
} 

function draw() { 
    clearCanvas(); 
    if(shotBall) 
    { 
     drawBall(); 
     moveBall(); 
    } 
    if (rightKey) block_x += 5; 
    else if (leftKey) block_x -= 5; 
    if (upKey) block_y -= 5; 
    else if (downKey) block_y += 5; 
    if (block_x <= 0) block_x = 0; 
    if ((block_x + block_w) >= WIDTH) block_x = WIDTH - block_w; 
    if (block_y <= 0) block_y = 0; 
    if ((block_y + block_h) >= HEIGHT) block_y = HEIGHT - block_h; 
    context.fillRect(block_x, block_y, block_w, block_h); 
} 

function drawBall() { 
     context.beginPath(); 
    context.arc(ball_x, ball_y, ball_radius, 0, Math.PI * 2, false); 
} 

function moveBall() { 
    ball_y += 1; 
    ball_x -= 1; 
} 

function onKeyDown(evt) { 
    if (evt.keyCode == 68) rightKey = true; 
    else if (evt.keyCode == 65) leftKey = true; 
    if (evt.keyCode == 87) upKey = true; 
    else if (evt.keyCode == 83) downKey = true; 
} 

function onKeyUp(evt) { 
    if (evt.keyCode == 68) rightKey = false; 
    else if (evt.keyCode == 65) leftKey = false; 
    if (evt.keyCode == 87) upKey = false; 
    else if (evt.keyCode == 83) downKey = false; 
    if(evt.keyCode == 32) createBall(); 
} 

function createBall() 
{ 
     ball_x = block_x + (block_w/2); 
     ball_y = block_y + (block_y/2); 
    radius = 20; 
    shotBall = true; 
} 
$(document).keydown(onKeyDown); 
$(document).keyup(onKeyUp);

來源

2012-03-20 DuxClarus

你正在得到什麼錯誤？ – 2012-03-20 06:03:10

我使用adobe Dreamweaver編寫代碼，所以它不會給我一個錯誤。至少沒有語法錯誤，它檢查那些。除非有辦法查看我不知道的Dreamweaver錯誤。但是，如果沒有繪製弧線，沒有錯誤。 – DuxClarus 2012-03-20 07:04:36

同樣的結果，沒有球。我嘗試了context.stroke（）;/context.fill（）;以及它們兩者的組合......並且如果我放入context.endPath（）;矩形也停止繪製。順便謝謝你的幫助。 – DuxClarus 2012-03-20 19:27:15

當我想你的代碼，我可以看到的問題是，你還沒有初始化block_w，並BLOCK_H和ball_radius變量，因爲這些值似乎是未定義正如我在螢火蟲工具中看到的那樣。

所以你必須確保你已經定義和初始化你使用的每個變量。另外您必須確保您正在調用您已定義的每個功能。當我在context.arc（23,34,45,0，Math.PI * 2，false）中手動輸入值時，功能那麼它適用於我。所以確保你已經定義並初始化了每個變量。

來源

2012-03-21 05:06:17

謝謝！它現在有效。儘管我在第一個函數上面定義了block_w和block_h，而不是在init（）中。我不知道我爲什麼最初做到了這一點，但現在您的建議已經奏效！：D快樂的日子！ – DuxClarus 2012-03-21 19:55:25

在java腳本中繪製一條弧線，但它不出現

回答

相關問題