javascript - 为什么 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.stroke() 之前使用 ctx.beginPath() ，这告诉画布在开始绘制之前清理其缓冲区，并在完成后将缓冲区输出到画布。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");
});

Answer 3

1. 首先第一行中的 ID 需要是 Id。
2. 然后对于 arc 函数，需要有一个ctx.beginPath(); 功能启动。
3. 之后给它一个颜色，例如。ctx.fillStyle = "你想要的颜色";
4. 然后，你的弧函数ctx.arc(50, 50, 50, 0, Math.PI * 2, false); 照原样
5. 然后在最后放ctx.fill(); 完成该过程。