为什么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"); 
});