How to capture an element inside a canvas?

Example: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_arc I want to learn how to make this entire circle a clickable link, how do I capture that element? How do events work inside a canvas?

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>

---

HTML5 canvas is raster-based, so it only contains information about pixel colors. For your reason you should use some vector-based technology like SVG.

If you really want to use canvas and you only need to know if there is anything under the cursor you can just check color of clicked pixel: context.getImageData(x, y, 1, 1).data it will return array of RGBA values. So you can for example check if clicked pixel is not transparent or not in background color. Check how it could work: http://jsfiddle.net/5qt4hezb/1/

链接地址: http://www.djcxy.com/p/63978.html

上一篇: 管理对象池的方式

下一篇: 如何捕捉画布内的元素？