Javascript 如何使用jquery访问画布？

我无法使用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>​

$（文档）.ready（函数（）{
$（'#sq'）。单击（函数（）{
警报（“测试”）；
});
});
形状
有黑色边框的矩形。背景是一个粉红色的圆圈。部分覆盖
. 
部分覆盖圆圈的是绿色
还有一个紫色的，
两者都是半透明的，所以下面可以看到完整的圆圈

​

您在

画布

元素中放置的所有内容都是：它不会在现代浏览器中使用，因此您无法访问它，也无法单击它

在现代浏览器中正确使用

画布

是使用其

上下文

绘制画布

发件人：

元素是一个HTML元素，可用于绘制 通过脚本（通常是JavaScript）生成图形。例如，它可以是 用于绘制图形、制作照片合成、创建动画或 甚至做实时视频处理

如果您想在

画布上捕捉点击，请执行以下操作

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

$（“#示例”）。单击（function（）{/您不应该将html元素放在画布标记中。画布的思想是使用代码（又称javascript）在画布上绘制。
你正在做的事情是行不通的（或者只有在浏览器不支持画布的情况下才会看到，这意味着非常旧的浏览器）：
从画布中取出html元素并更改
$（'#sq'）。单击（function（）{
到
$（'#示例'）。单击（function（）{/code>

看看这个：
很抱歉，JSFIDLE画布标记不起作用。请尝试添加画布并给我一个例子-selvaim试图在画布中创建一个3d元素。但它在JQUERY中不起作用。文档中的单击事件为什么准备就绪？@RickCalder如果没有在document.ready中定义它，则$（'#sq'）集合将是空的，事件侦听器将不会被注册。谢谢，我自己还在学习jQuery。我假设这只对通常没有自己的单击事件的元素是必要的？我如何解释这一点。wait bro我将给出一个示例站点。wait bro我将给出一个示例站点