2

arc() 関数がどのように機能するかを現在理解しているにもかかわらず、なぜパックマンの形を描画できないのかを理解しようとしています。

Chrome/Firefox で次のコードを試すと、完全な円が描画されますが、これは期待したものではありません。非ゼロの巻線規則と関係があるのではないかと思いますか? 私の推測では、-45 は内部的に正規化されており、その結果、角度スイープが CW ではなく CCW になっていると思われます。しかし、最後の引数を 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

これは古い質問であり、すでに回答されていることは知っていますが、単一の弧でパックマンを描く簡単な方法があると思います.

// 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();

受け入れられた答えは機能しますが、1 つの円弧ではなく 2 つの半円を使用しました。この方法では、アウトラインを描画するオプションも提供されます。

于 2016-09-24T10:32:10.590 に答える