我无法实现JCanvas
我无法实现JCanvas
提问于 2014-02-25 16:24:37
我刚开始学习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>但是我无法实现上面的内容。我在这里尝试绘制的圆没有显示在画布上。我做错了什么？
回答 2
Stack Overflow用户
发布于 2014-02-25 16:31:09
看起来你的代码本身是很好的。考虑将您的代码包装在$(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，所以它可能会偶尔停止工作。
更新：从代码中删除未使用的变量，将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。它可能会被更改或删除，并且可能还没有准备好高负载。
Stack Overflow用户
发布于 2014-02-25 22:42:44
可能还有其他方法，但这是可行的。我从内部获取了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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22008407
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号