Question

我无法使用jquery访问画布ID。

我添加了jQuery库。但是当我点击画布ID时，我无法收到提醒。

但javascript工作正常。

    <script>
    $(document).ready(function(){
    $('#sq').click(function(){
    alert('test');
    });
    });
    </script>
    <canvas id="example" width="260" height="200">
        <h2>Shapes</h2>
      <p>A rectangle with a black border. In the background is a pink circle. Partially overlaying the 
      <a href="http://en.wikipedia.org/wiki/Circle" onfocus="drawCircle();" onblur="drawPicture();">circle</a>. 
      Partially overlaying the circle is a green 
      <a href="http://en.wikipedia.org/wiki/Square" onfocus="drawSquare();" onblur="drawPicture();" id="sq">square</a> 
      and a purple <a href="http://en.wikipedia.org/wiki/Triangle" onfocus="drawTriangle();" onblur="drawPicture();">triangle</a>, 
      both of which are semi-opaque, so the full circle can be seen underneath.</p>
    </canvas>

Answer 1

您放在canvas元素中的所有内容都是fallback content：它不会在现代浏览器中使用，因此您无法访问它，您当然也无法点击它。

在现代浏览器中正确使用canvas是使用context绘制它。

来自the MDN：

＆lt;帆布＆gt; element是一个可用于绘制的HTML元素图形通过脚本（通常是JavaScript）。例如，它可以用于绘制图形，制作照片合成，创建动画或甚至可以进行实时视频处理。

如果您想抓住canvas的点击次数，请执行

$('#example').click(function(){ // <-- use the id of the canvas
    alert('test');
});

Answer 2

您不应将html元素放在canvas标记内。画布的想法是使用代码（a.k.a.javascript）绘制。你正在做的事情不会起作用（或者只有当浏览器不支持画布时才会看到它 - 这意味着非常古老的浏览器）：）

Answer 3

将html元素从画布中取出，并将$('#sq').click(function(){更改为$('#example').click(function(){

看看这个： http://jsfiddle.net/Zprb4/

如何使用jquery访问画布？

3 个答案: