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.