如何捕捉畫布內的元素？

例如：http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_arc 我想了解如何使整個圓圈成爲可點擊的鏈接，我如何捕捉該元素？事件如何在畫布內工作？如何捕捉畫布內的元素？

var c = document.getElementById("myCanvas"); 
 
var ctx = c.getContext("2d"); 
 
ctx.beginPath(); 
 
ctx.arc(100, 75, 50, 0, 2 * Math.PI); 
 
ctx.stroke();

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> 
 
Your browser does not support the HTML5 canvas tag.</canvas>

來源

2015-05-03 odedta

請考慮將代碼添加到您的問題，而不是鏈接到它。這樣，當鏈接死亡時，這個問題仍然對其他人有意義。這可能也更有可能獲得答案，因爲人們會立即看到一些嘗試的代碼 – Toby

這可能是您正在尋找的答案如何將簡單的onClick事件處理程序添加到canvas元素？：http：// stackoverflow。 com/questions/9880279/how-do-i-add-a-simple-onclick-event-handler-to-a-canvas-element – Stepashka

Toby，there。 @Stepashka，我會檢查一下，看起來有點複雜。謝謝。 – odedta

HTML5畫布是光柵化，因此它只包含像素顏色信息。出於你的理由，你應該使用一些基於矢量的技術，如SVG。

如果你真的想使用畫布，你只需要知道光標下面是否有任何東西，你可以檢查單擊像素的顏色：context.getImageData(x, y, 1, 1).data它將返回RGBA值的數組。所以你可以例如檢查點擊的像素是否不透明或不是背景顏色。檢查它如何工作： http://jsfiddle.net/5qt4hezb/1/

來源

2015-05-03 16:16:11 Marek

謝謝！你能否向我推薦一個好的教程？ – odedta

你的意思是SVG教程？我不知道任何，但你可以嘗試RaphaelJS庫，並閱讀例如本教程： http://cancerbero.mbarreneche.com/raphaeltut/ – Marek

如何捕捉畫布內的元素？

回答

相關問題