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

但什么也没有出现。我知道问题出在 arc 函数上，因为它ctx.fillRect(0, 0, 100, 100);工作正常。

知道我做错了什么吗？

（是的，我有 JQuery）

Answer 1

您需要在 ctx.arc() 之前使用 ctx.beginPath() ，之后使用 ctx.lines() ，这告诉画布在开始绘制之前清理其缓冲区，并在完成后将缓冲区输出到画布。fill矩形（）/中风矩形（）已经为您处理这些开始/结束任务。