使用单个 arc() 函数调用绘制 pacman 形状？答案

【问题标题】：Drawing pacman shape with single arc() function call?使用单个 arc() 函数调用绘制 pacman 形状？
【发布时间】：2012-12-30 18:32:34
【问题描述】：

鉴于我目前对 arc() 函数的工作原理的理解，试图找出为什么我不能绘制 pacman 形状。

当我在 Chrome/Firefox 中尝试以下代码时，它绘制了一个完整的圆圈，这不是我所期望的。我怀疑这可能与非零缠绕规则有关？我的猜测是 -45 正在内部归一化，导致产生的角度扫描变为逆时针而不是顺时针。但是当我通过将最终 arg 更改为 CCW 来测试该假设时，Chrome 中没有任何变化（但是 FF 行为不同，因为没有绘制任何内容）

// draw pacman shape
ctx.arc(200,200,50, -45 * DEGREES, 45 * DEGREES, false);
ctx.stroke();

完整示例： http://pastebin.com/2ZkJXgJU

【问题讨论】：

标签： html canvas html5-canvas

【解决方案1】：

这就是你要找的东西：

ctx.beginPath();
ctx.arc(100, 100, 50, 0.25 * Math.PI, 1.25 * Math.PI, false);
ctx.fillStyle = "rgb(255, 255, 0)";
ctx.fill();
ctx.beginPath();
ctx.arc(100, 100, 50, 0.75 * Math.PI, 1.75 * Math.PI, false);
ctx.fill();
ctx.beginPath();
ctx.arc(100, 75, 10, 0, 2 * Math.PI, false);
ctx.fillStyle = "rgb(0, 0, 0)";
ctx.fill();

来源：http://simeonvisser.hubpages.com/hub/HTML5-Tutorial-Drawing-Circles-and-Arcs

【讨论】：

【解决方案2】：

我知道这是一个老问题，并且已经得到解答，但我认为有一种更简单的方法可以用一条弧线绘制 pac-man。

// An arc with an opening at the right for the mouth
ctx.beginPath();
ctx.arc(100, 100, 50, 0.2 * Math.PI, 1.8 * Math.PI, false);

// The mouth
// A line from the end of the arc to the centre
ctx.lineTo(100, 100);

// A line from the centre of the arc to the start
ctx.closePath();

// Fill the pacman shape with yellow
ctx.fillStyle = "yellow";
ctx.fill();

// Draw the black outline (optional)
ctx.stroke();

// Draw the eye
ctx.beginPath();
ctx.arc(100, 75, 10, 0, 2 * Math.PI, false);
ctx.fillStyle = "rgb(0, 0, 0)";
ctx.fill();

接受的答案会起作用，但它使用了两个半圆而不是一个圆弧。此方法还为您提供了绘制轮廓的选项。

【讨论】：

不错的方法 :) 谢谢！

【解决方案3】：

您的第四个和第五个参数是错误的，它们的范围从 -Math.PI 到 Math.PI，而不是度数。

我用来制作类似“pacman”的形状的一个技巧是将笔画的大小设置为等于圆的半径

ctx.lineWidth = 50;
ctx.arc(200,200,50,Math.PI*2.1,Math.PI*1.7, false);
ctx.stroke();

见：http://jsfiddle.net/8JaLY/2/

【讨论】：

谢谢 Xeli，我的参数实际上是弧度（DEGREES 是一个可以转换的常数），虽然我调整了你的例子，它给了我想要的东西：jsfiddle.net/8JaLY/3
糟糕，虽然我刚刚意识到我的 DEGREES 作业中有一个错误。我的意思是说 var DEGREES = Math.PI / 180; （意外成倍增加）：]
@joeycato 不客气，如果您对答案感到满意，请将其标记为“已回答”:)
@joeycato 我认为将上述技巧更改为：ctx.arc(200,200,50,Math.PI*2.1,Math.PI*1.8, false); 将返回更好且与 pacman 相似的形状。

【解决方案4】：

请参考https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/beginPath了解什么是PATH

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var centerX = 100;
var centerY = 100;
var radius = 50; 
ctx.beginPath();
ctx.moveTo(centerX,centerY);
ctx.arc(
  centerX,centerY,radius,
  -Math.PI/4,Math.PI/4, // -45 deg to 45 deg
  true //anticlockwise
 );
ctx.lineTo(centerX,centerY);
ctx.stroke();//border
ctx.fillStyle = "rgb(255, 255, 0)";
ctx.fill();
ctx.closePath();

&lt;canvas id="myCanvas" width="480" height="320"&gt;&lt;/canvas&gt;

【讨论】：