HTML5 Canvas：未定义绘制
[英]HTML5 Canvas: draw is not defined
问题描述
我试图按照Mozilla的HTML5画布教程这里 。 但是我得到了错误：
Uncaught ReferenceError: draw is not defined
我有这样的脚本：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="application/javascript">
$(function() {
function draw() {
var canvas = document.getElementById("main");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
}
});
</script>
</head>
<body onload="draw();">
<canvas id="main" width="150" height="150"></canvas>
</body>
我已经尝试过将脚本放置在canvas元素之前和之后，但没有任何变化。
有人知道我在做什么错吗？
2 个解决方案
解决方案1
2 已采纳 2013-07-29 11:09:55
您在这里误用了jQuery。 现在，您的draw（）方法仅在jQuery调用的ready（）方法中可用（并声明）。 使函数成为全局函数，然后跳过jQuery部分。
<script type="text/javascript">
function draw() {
var canvas = document.getElementById("main");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
}
</script>
您会看到$(function(){ ... }); 是$(document).ready()的简写，当加载所有DOM元素时，它们用作回调。 在您不需要的情况下，因为无论如何，body onload事件都会调用您的draw（）方法！ :-)
解决方案2
1 2013-07-29 11:15:04
上述答案的替代方法是使用对draw()的内联调用退出并删除函数标头，以便它在加载时直接进入该标头。
<script type="application/javascript">
$(function() {
var canvas = document.getElementById("main");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
});
</script>
然后您的身体将被释放：
<body>
<canvas id="main" width="150" height="150"></canvas>
<!-- ... -->
无法在 html5 画布上绘制
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.