用單個arc（）函數調用繪製pacman形狀？

考慮到我目前對arc（）函數的工作原理的理解，試圖找出爲什麼我不能繪製pacman形狀。用單個arc（）函數調用繪製pacman形狀？

當我在Chrome/Firefox中嘗試下面的代碼時，它繪製了一個完整的圓圈，這不是我所期望的。我懷疑這可能與非零纏繞規則有關？我的猜測是-45正在內部歸一化，導致產生的角度掃描變成CCW而不是CW。但是，當我測試的假設，通過改變最終ARG是CCW，沒有在Chrome改變（不過FF行爲是不同的，沒有什麼是畫）

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

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

來源

2012-12-30 joeycato

這是什麼您尋找：

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-30 18:38:38

感謝hbrock，很多很好的使用信息在這裏:) – joeycato

你的第四和第五個參數是錯誤的，它們的範圍從-Math.PI到Math.PI，而不是度數。

我用來做「吃豆子」一樣的形狀是通過設置行程等於圓的半徑大小一招

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-30 18:51:43 Xeli

感謝Xeli，我ARGS實際上是弧度（度左右一個常數，將轉換），雖然我調整了你的例子，它給了我正是我想要的：http://jsfiddle.net/8JaLY/3/ – joeycato

糟糕，但我只是意識到我的DEGREES任務中有一個錯誤。我的意思是說var DEGREES = Math.PI/180; （意外地相乘）：] – joeycato

@joeycato歡迎您，如果您對答案感到滿意，請將其標記爲'回答':) – Xeli

我知道這是一個古老的問題已經得到解答，但我認爲有一種更簡單的方法可以用單弧來繪製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-24 10:32:10 KWILLIAMS

不錯的做法:)謝謝！ – joeycato

請參考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-08 07:50:00

用單個arc（）函數調用繪製pacman形狀？

回答

相關問題