我无法实现JCanvas

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文档。

我还创建了jsFiddle ，您的代码就可以在其中运行。 我从此处使用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展示厅获取的，并且不应被认为是可靠的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 个解决方案

解决方案1
0 2014-02-25 08:31:09

解决方案2
0 2014-02-25 14:42:44

我无法实现JCanvas

问题描述

2 个解决方案

解决方案1 0 2014-02-25 08:31:09

解决方案2 0 2014-02-25 14:42:44

解决方案1
0 2014-02-25 08:31:09

解决方案2
0 2014-02-25 14:42:44