Question

我是学习JCanvas的新手。我正在尝试实现一个简单的JCanvas程序。这是我的代码：

<!DOCTYPE html>
   <html>
    <head>  
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">             </script>
        <script src='jcanvas.min.js'></script>
    </head>
    <body>
        <canvas id="drawingCanvas" width="500" height="500" style="border:1px solid  black;align:center;"></canvas>
        <script>
           var canvas = document.getElementById("drawingCanvas");
           var ctx = canvas.getContext("2d");
           $('canvas').drawArc({
              strokeStyle: 'green',
              draggable: true,
              x:100, y:100,
              radius: 50
           });
        </script>
    </body>
</html>

但我无法实施上述内容。我想在这里画的圆圈没有显示在画布上。我做错了什么？

Answer 1

看起来你的代码本身就很好。考虑将代码包装在$(document).ready(function () {});中，如下所示：

<script>
$(document).ready(function () {
   $('canvas#drawingCanvas').drawArc({
      strokeStyle: 'green',
      draggable: true,
      x:100, y:100,
      radius: 50
   });
});
</script>

这可以保证在整个DOM结构加载到浏览器内存中并准备与JavaScript交互时执行代码。有关详细信息，请参阅jQuery docs。

我还创建了jsFiddle，您的代码正常运行。我使用来自here的网址附加了jCanvas，因此它可能会偶尔停止工作。

UPDATE ：从代码中删除未使用的变量，将id添加到jQuery选择器 UPDATE2 ：没有jsFiddle，它应该看起来像那样

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">

    <title>Sample</title>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="http://calebevans.me/projects/jcanvas/resources/jcanvas/jcanvas.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('canvas#drawingCanvas').drawArc({
                strokeStyle: 'green',
                draggable: true,
                x:100, y:100,
                radius: 50
            });
        });
    </script>
</head>
<body>
    <canvas id="drawingCanvas" width="500" height="500" style="border:1px solid  black;align:center;"></canvas>
</body>
</html>

UPDATE3 ：请不要像上面示例中那样使用jCanvas附件，链接是从jCanvas showroom抓取的，不应该是可靠的CDN。它可能被更改或删除，并且可能无法为高负载做好准备。

Answer 2

可能有其他方法，但这有效。我在内部采购了jCanvas和jQuery

  <!DOCTYPE html>
   <html>
    <head>  
        <script src="jquery.js"></script>
        <script src='jcanvas.min.js'></script>    
    <script>
           var canvas = document.getElementById("canvas");
           var ctx = canvas.getContext("2d");
           function init(){
              $("canvas").drawArc({
              strokeStyle: 'green',
              draggable: true,
              x:100, y:100,
              radius: 50
              });
           }

    </script>
    </head>

    <body onload="init()">
        <canvas id="canvas" width="500" height="500" style="border:1px solid  black;align:center;"></canvas>
    </body>
</html>

我无法实现JCanvas

2 个答案: