使用JQuery在鼠标点击上插入圆圈

Inserting circles on mouse click using JQuery

本文关键字：插入 JQuery 鼠标 使用      更新时间：2023-09-26

今天刚开始学习这门语言(如果这是一个愚蠢的问题，我很抱歉)，但我正试图弄清楚如何在网页上插入圆圈。我在这里找到了一个示例代码:http://jsfiddle.net/7xQZ2/但是，当我尝试从单个文件运行它时，脚本部分由于某种原因没有运行。我试着改变周围的<body>和<script>。它只是显示一个坐标为(0,0)的框。它保持静态，当我移动鼠标时它不会改变。

<!DOCTYPE html>
<html>
<head>
    <h2 id="status2">0, 0</h2>
    <canvas width="500px" height="500px" style="width: 500px; height: 500px; border:1px ridge green;" id="special">
    </canvas>
</head>
<body> 
    <script>
        jQuery(document).ready(function(){
             $("#special").click(function(e){ 
                var x = e.pageX - this.offsetLeft;
                var y = e.pageY - this.offsetTop; 
                /* var c=document.getElementById("special"); */
                var ctx= this.getContext("2d"); /*c.getContext("2d");*/
                ctx.beginPath();
                ctx.arc(x, y, 10,0, 2*Math.PI);
                ctx.stroke();
                $('#status2').html(x +', '+ y); 
           }); 
        })  
    </script>
</body>
</html>

您需要包含jQuery。将这行放在head部分:

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

同时将head中的位置移动到body中，反之亦然。

您的代码正在使用jQuery库。请确保在使用代码之前包含它。

另外，所有的HTML元素都需要在body标签中，而不是head标签中。

<!DOCTYPE html>
<html>
<body>
    <h2 id="status2">0, 0</h2>
    <canvas width="500px" height="500px" style="width: 500px; height: 500px; border:1px ridge green;" id="special">
    </canvas>
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script>
        jQuery(document).ready(function(){
             $("#special").click(function(e){ 
                var x = e.pageX - this.offsetLeft;
                var y = e.pageY - this.offsetTop; 
                /* var c=document.getElementById("special"); */
                var ctx= this.getContext("2d"); /*c.getContext("2d");*/
                ctx.beginPath();
                ctx.arc(x, y, 10,0, 2*Math.PI);
                ctx.stroke();
                $('#status2').html(x +', '+ y); 
           }); 
        })  
    </script>
</body>
</html>

如果你的HTML只有这个

<!DOCTYPE html>
<html>
<head>
    <h2 id="status2">0, 0</h2>
    <canvas width="500px" height="500px" style="width: 500px; height: 500px; border:1px ridge green;" id="special">
    </canvas>
</head>
<body> 
    <script>
        jQuery(document).ready(function(){
             $("#special").click(function(e){ 
                var x = e.pageX - this.offsetLeft;
                var y = e.pageY - this.offsetTop; 
                /* var c=document.getElementById("special"); */
                var ctx= this.getContext("2d"); /*c.getContext("2d");*/
                ctx.beginPath();
                ctx.arc(x, y, 10,0, 2*Math.PI);
                ctx.stroke();
                $('#status2').html(x +', '+ y); 
           }); 
        })  
    </script>
</body>
</html>

那么是的，它不起作用。因为你使用的代码属于JavaScript的jQuery库。这需要在代码中包含jQuery。它不是每个浏览器内置的。

使用此代码添加它。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
相关文章：