javascript畫布圓限制和onclick變量

我剛開始學習自己的畫布，所以我有簡單的問題，谷歌無法回答我。javascript畫布圓限制和onclick變量

首先，我有一個700px寬和700px高的畫布元素。所以我的畫布的限制是Rect。但我不希望它是一個矩形，我需要一個圓。使用CSS時，只有樣式更改。

我的第二個問題是關於事件。我有一個繪製一個新對象的變量。如果有人點擊該對象，應該發生一些事情。但是我怎麼能點擊對象，如果它不是一個元素，而是一個JavaScript中的變量？

非常感謝大家！

來源

2012-09-25 user1590534

[我可以看到CSS規則很好地適用於畫布元素]（http://jsfiddle.net/ASBJZ/1/）。所以，我並沒有真正明白你的意思是「限制」 – Alexander

@Alexander你仍然可以在用css創建的邊界的「邊界」之外繪製。看到這裏：http://jsfiddle.net/XQaUT/並在繪製矩形之前取消對'maskCanvas'的調用。 – Shmiddty

感謝你們兩位！ – user1590534

CSS允許您直觀地劃定您正在使用的代碼的區域，「border-radius」屬性可以爲您做這些。如果您的腳本在圓形區域內需要特定的鼠標事件，則可以應用一些基本的數學運算來確定鼠標是在圓圈內部還是外部。另一方面，您不能「單擊變量」，但可以使用預定義的高度和寬度屬性定義空元素（吸或作爲元素），將click事件綁定到它，然後將事件與變量相關聯在你的腳本中。

來源

2012-09-25 17:51:34 Enoban

我懂了！謝謝！！ – user1590534

http://jsfiddle.net/XQaUT/1/

您可以通過使用clip功能掩蓋畫布：

function maskCanvas(){ 
    ctx.beginPath(); 
    ctx.arc(rad, rad, rad, 0, Math.PI * 2, false); 
    ctx.clip(); 
} 

maskCanvas();

你會想畫什麼都到畫布上之前做到這一點。

ctx.fillRect(0,0,100,100);

創建的最後Path由帆布

ctx.beginPath(); 
ctx.fillStyle = "#f00"; 
ctx.arc(rad,rad,50, 0, Math.PI * 2, false); 
ctx.fill();

記得，所以你可以使用isPointInPath確定鼠標單擊是否是路徑中。

canvas.onclick = function(e){ 
    console.log(ctx.isPointInPath(e.x,e.y)); 
};

來源

2012-09-25 17:55:32 Shmiddty

非常感謝！ – user1590534

javascript畫布圓限制和onclick變量

回答

相關問題