我无法实现 JCanvas答案

【问题标题】：I am unable to implement JCanvas我无法实现 JCanvas
【发布时间】：2014-02-25 23:48:19
【问题描述】：

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

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

【问题讨论】：

标签： javascript jquery html canvas jcanvas

【解决方案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 的 URL 附加了 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。它可能会被更改或删除，并且可能还没有准备好进行高负载。

【讨论】：

在我的回答中查看指向 jsFiddle 的链接，它也会失败吗？
是的，我也试过那个代码，它也失败了。一切正常，但无法理解问题所在？
好的，那你用什么浏览器呢？对我来说，它在 Chrome、Safari 和 FireFox 中运行良好，但在 IE11 中失败，让我调查一下原因。
考虑检查 Chrome 开发者工具控制台。要在 Windows 上打开它，只需点击 F12，切换到其中的控制台选项卡，然后重新加载页面。有关详细信息，请参阅此developers.google.com/chrome-developer-tools。
实现 jcanvas 是否正确？

【解决方案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>

【讨论】：