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.be（）和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

第一行中的所有ID首先必须为ID。
然后，对于arc函数，需要有一个 ctx.beginPath（）; 功能启动。
之后给它加一个颜色，例如。 ctx.fillStyle =“为您增色想要”；
然后，您的弧函数 ctx.arc（50，50，50，0，Math.PI * 2， false）； 原样
然后在最后放置 ctx.fill（）; 以完成过程。

Answer 4

就我而言，我将Math.PI误认为Math.pi。

为什么canvas.arc不工作？

4 个答案: