2

鉴于我目前对 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

4

4 回答 4

4

这就是你要找的：

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

于 2012-12-30T18:38:38.637 回答
3

我知道这是一个老问题，并且已经得到解答，但我认为有一种更简单的方法可以用一条弧线绘制 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();

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

于 2016-09-24T10:32:10.590 回答
2

您的第四和第五个论点是错误的，它们的范围从 -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/

于 2012-12-30T18:51:43.440 回答
0

请参考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();
<canvas id="myCanvas" width="480" height="320"></canvas>

于 2017-08-08T07:50:00.107 回答