Canvas基本不工作圖片繪製

我已經嘗試過無數次，使我的背景出現在JavaScript中，因爲我希望如果有人能夠幫助撕碎一些光爲什麼它不會加載任何東西。Canvas基本不工作圖片繪製

我今天編輯了這個無數次，並且仍然無法使它工作。

var canvas = document.createElement("canvas"); 
var ctx = canvas.getContext("2d"); 


ctx.height = 512; 
ctx.width = 480; 
document.body.appendChild(canvas); 

// Game Loop 

var Time; 
function gameLoop() { 
    var now = date.now(); 
    var dateTime = (now - time)/1000.0; 

    update(dateTime); 
    render(); 

    time = now; 
    requestAnimationFrame(gameLoop); 
} 

// image call 
function backgroundDraw() { 
    backgroundImg = new image; 
    backgroundImg.src = 'images/background.png' 
    backgroundImg.onload = function() { 
     ctx.drawImage(backgroundImg, 100, 100); 
    } 
} 
backgroundDraw();

我是新來的JavaScript和我在看的導遊帶是http://jlongster.com/Making-Sprite-based-Games-with-Canvas和http://www.w3schools.com/tags/canvas_drawimage.asp

任何幫助的工作真的會感謝你們！

來源

2014-03-28 li x

的第一個問題是建立在畫布的尺寸。使用畫布元素設置其寬度和高度。

更改此

ctx.height = 512; 
ctx.width = 480;

這個

canvas.height = 512; 
canvas.width = 480;

您的圖片實例有一個錯字，改變

backgroundImg = new image;

到

backgroundImg = new Image;

你可以檢查這個小提琴的工作demo。

來源

2014-03-28 23:04:42 ryeballar

非常感謝你，我很抱歉，這個問題是如此基本，部分是我犯的一個大錯誤（打印錯字）。 –

var canvas = document.createElement("canvas"); 
canvas.style.width = "480px"; // missing width 
canvas.style.height = "512px"; // missing height 
var ctx = canvas.getContext("2d"); 

ctx.height = 512; 
ctx.width = 480; 
document.body.appendChild(canvas); 

// Game Loop 

var Time; 
function gameLoop() { 
    var now = Date.now(); 
    var dateTime = (now - time)/1000.0; 

    update(dateTime); 
    render(); 

    time = now; 
    requestAnimationFrame(gameLoop); 
} 

// image call 
function backgroundDraw() { 
    backgroundImg = new Image; // construct typo 
    backgroundImg.src = 'http://www.artisticadigital.com/wp-content/uploads/cache/2014/02/HTML5_Logo_512/14550496.png' 
    backgroundImg.onload = function() { 
     ctx.drawImage(backgroundImg, 100, 100); 
    } 
} 
backgroundDraw();

我不明白，你想要做

來源

2014-03-28 22:57:33

我正在尋找將圖像加載到我在頂部創建的畫布中，但由於某種原因，當我加載頁面時它沒有顯示。感謝您花時間嘗試和幫助:)編輯： –

爲什麼否定投票？我的代碼作品 –

我在猜測某人選擇投票的原因，這是因爲你發佈了所有的代碼，並簡單地寫下了「我不明白你想要做的事」直到你寫上面的評論，我甚至沒有注意到你改變了一切。 –

一些事情。首先在你的gameLoop函數中使用var Time !== time。此外，您需要在設置圖像元素上的src之前定義onload函數。 new image需要圖片大寫：new Image。現在我會將你的gameloop註釋掉，因爲你只是想顯示圖像。這樣做，並將圖像更改爲圖像獲取圖像呈現給我。

來源

2014-03-28 23:18:35

感謝您的回覆，我現在的圖片工作非常棒！我不清楚你在哪裏找到了，var Time！==我的代碼中的時間還是它是我當前遊戲循環中的一個建議添加項？我現在也重新安排了我的代碼塊，所以順序是正確的，關心李 –

Canvas基本不工作圖片繪製

回答

相關問題