我无法实现JCanvas
[英]I am unable to implement JCanvas
问题描述
I am new to learn JCanvas. 
我是新来学习JCanvas的人。 I am trying to implement a simple JCanvas program. 我正在尝试实现一个简单的JCanvas程序。 Here is my code: 这是我的代码：
<!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>
But I am unable to Implement the above. 但是我无法实现以上。 The Circle I am trying to draw here is not getting displayed on the canvas. 我要在此处绘制的圆没有显示在画布上。 What Am I doing wrong? 我究竟做错了什么？
2 个解决方案
解决方案1
0 2014-02-25 08:31:09
Looks like your code is quite fine itself. 看起来您的代码本身就很好。 Consider wrapping your code in $(document).ready(function () {}); 考虑将代码包装在$(document).ready(function () {}); , like this: ， 像这样：
<script>
$(document).ready(function () {
$('canvas#drawingCanvas').drawArc({
strokeStyle: 'green',
draggable: true,
x:100, y:100,
radius: 50
});
});
</script>
This guarantees that your code will executed when the whole DOM structure is loaded in browser memory and ready to interact with JavaScript. 这样可以确保在将整个DOM结构加载到浏览器内存中并准备与JavaScript交互时，将执行您的代码。 See jQuery docs for more details. 有关更多详细信息，请参见jQuery文档 。
I've also created jsFiddle , where your code just works. 我还创建了jsFiddle ，您的代码就可以在其中运行。 I attached the jCanvas using URL from here , so it might stop working occasionally. 我从此处使用URL附加了jCanvas，因此它有时可能会停止工作。
UPDATE : removed unused variables from the code, added id to jQuery selector. UPDATE ：从代码中删除未使用的变量，将ID添加到jQuery选择器。
UPDATE2 : Without jsFiddle, it should look like that 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 : Please do not use jCanvas attaching like in the sample above, the link was grabbed from jCanvas showroom and is not supposed to be reliable CDN. UPDATE3 ：请不要像上面的示例中那样使用jCanvas附加，该链接是从jCanvas展示厅获取的 ，并且不应被认为是可靠的CDN。 It might be changed or removed, and it might not be ready to high load. 可能会对其进行更改或删除，并且可能尚未准备好承受高负载。
解决方案2
0 2014-02-25 14:42:44
there are probably other ways, but this works. 可能还有其他方法，但这可行。 I sourced jCanvas and jQuery internally 我在内部来源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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.