Question

今天刚开始学习这门语言（如果这是一个愚蠢的问题，我很抱歉），但我想弄清楚如何在网页上插入圆圈。我在这里找到了一个示例代码：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>

Answer 1

您需要包含jQuery。将此行放在head部分：

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

同时将head中的内容移至body，反之亦然。

Answer 2

您的代码正在使用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>

Answer 3

如果您只将此作为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>

使用JQuery在鼠标单击时插入圆圈

3 个答案: