無法通過畫布顯示任何東西

Question

我想用JavaScript和jQuery構建一個高亮庫。我本週只是潛入Canvasing技術，並沒有發現它們都很難。但是，在今天工作的同時，我的代碼已停止工作。我知道我可能只是錯過了一些顯而易見的東西，但是現在我已經堅持了將近2個小時，我需要讓這個項目再次向前邁進。任何幫助將不勝感激。

$(function() { 
    $('area').click(function(event) { 
    event.preventDefault(); 
    document.getElementById("ctx").getContext("2d").fillStyle = "#FF0000"; 
    document.getElementById("ctx").getContext("2d").fillRect(0, 0, 200, 200); 
    }); 
}); 

我只包括我的Javascript，因爲那是我最近唯一改變的東西。

Answer 1

您的代碼工作對我來說，假設：

• 該頁面有一個可點擊的area。
• 該頁面有一個#id爲ctx的畫布。

確保那些兩件事情是關於你的設置真的......

請問您的canvas元素有ctx的#ID？這不是致命的，但畫布元素包含一個context，所以它有點誤導。

如果你有這樣的canvas元素：

<canvas id=canvas></canvas> 

然後你就可以得到這樣一個可重複使用的參考畫布的背景：

// no need to constantly get a context reference ... 
//  just do it once at the start of your app 
var canvas=document.getElementById('canvas'); 
var context=canvas.getContext('2d'); 

而且可以重複使用這方面的參考做你所有的繪圖調用：

context.fillStyle='red'; 
context.fillRect(0,0,200,200);