檢測弧內點擊

Question

如何檢測HTML畫布元素中繪製的弧線內的鼠標點擊？

我創建像這樣的弧：

ctx.beginPath(); 
ctx.arc(250, 250, outsideRadius, angle, angle + arc, false); 
ctx.arc(250, 250, 0, 0, 0, true); 
ctx.fill(); 

我曾嘗試爲被吸引到後來使用myArc.ctx.isPointInPath（mouseX，mouseY的）每個弧上下文對象聯繫起來 - 但沒有用 - 所以我想用基本的三角函數來判斷鼠標點擊是否在界限內。

在此先感謝！

Answer 1

您應該使用

ctx.isPointInPath（X，Y）;

我所做的是我將beginPath，路徑「繪圖」移動到一個函數中，並且我還將它稱爲繪圖，並且還用於確定鼠標是否觸及形狀。

function shape() { 
    ctx.beginPath(); 
    ctx.arc(250, 250, outsideRadius, angle, angle + arc, false); 
    ctx.arc(250, 250, 0, 0, 0, true); 
} 

function draw() { 
    shape(); 
    ctx.fill(); 
} 

function checkHit(x, y) { 
    shape(); 
    return ctx.isPointInPath(x, y); 
} 

如果你建立你的應用程序是這樣，這將是很容易添加其他形狀