爲什麼canvas.arc無法正常工作？

Question

我有一個網頁的結束這段代碼：

var canvas = document.getElementByID("canvas"); 
var ctx = canvas.getContext("2d"); 
canvas.style.width = $(window).width(); 
canvas.style.height = $(window).height(); 
ctx.arc(50, 50, 50, 0, Math.PI * 2, false); 
$(window).resize(function() { 
    canvas.style.width = $(window).width(); 
    canvas.style.height = $(window).height(); 
    console.log("resize"); 
}); 

但什麼也不顯示。我知道問題是與弧功能，因爲ctx.fillRect(0, 0, 100, 100);工作正常。

任何想法我做錯了什麼？

（是的，我有JQuery的）

Answer 1

您需要使用ctx.arc前ctx.beginPath（）（）和ctx.stroke（）之後，這告訴帆布清理其緩衝區它開始繪製前並在完成後將緩衝區輸出到畫布。 fillRect（）/ strokeRect（）已經爲你處理了這些開始/結束任務。

Answer 2

你需要做的路徑：

var canvas = document.getElementByID("canvas"); 
var ctx = canvas.getContext("2d"); 
canvas.style.width = $(window).width(); 
canvas.style.height = $(window).height(); 

ctx.beginPath(); // <-- start a path 

ctx.arc(50, 50, 50, 0, Math.PI * 2, false); // <-- add the arc to the path 

ctx.strokeStyle = "#000000"; // <-- set fill color 
ctx.stroke(); // <-- draw the arc 

$(window).resize(function() { 
    canvas.style.width = $(window).width(); 
    canvas.style.height = $(window).height(); 
    console.log("resize"); 
});