0

我是学习 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>

但我无法实现上述。我在这里尝试绘制的圆圈没有显示在画布上。我究竟做错了什么？

4

2 回答 2

0

可能还有其他方法，但这有效。我在内部采购了 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>
于 2014-02-25T14:42:44.307 回答
0

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

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

这保证了当整个 DOM 结构加载到浏览器内存中并准备好与 JavaScript 交互时，您的代码将被执行。有关更多详细信息，请参阅jQuery 文档。

我还创建了jsFiddle，您的代码可以在其中工作。我使用来自此处的 URL 附加了 jCanvas ，因此它可能偶尔会停止工作。

更新：从代码中删除未使用的变量，将 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>

更新3 ：请不要像上面的示例那样使用 jCanvas 附加，链接是从 jCanvas 陈列室抓取的，不应该是可靠的 CDN。它可能会被更改或删除，并且可能还没有准备好承受高负载。

于 2014-02-25T08:31:09.300 回答