爲什麼這個JavaScript在我的<canvas>標籤上畫一個矩形？

爲什麼不能使用？爲什麼這個JavaScript在我的<canvas>標籤上畫一個矩形？

<html> 
     <head> 
       <title>Learning the basics of canvas</title> 
       <meta charset="utf-8"> 
       <script type="text/javascript" src="http://ajax.googleapis.com?/ajax/libs/jquery/1/jquery.min.js"></script> 
       <script type="text/javascript"> 
         $(document).ready(function() { 
         var canvas = $("#myCanvas"); 
         var context = canvas.get(0).getContext("2d"); 
         context.fillRect(40, 40, 100, 100); 
         }); 
       </script> 
     </head> 
     <body> 
       <canvas id="myCanvas" width="500" height="500"> 
         <!-- Insert fallback content here --> 
       </canvas> 
     </body> 
</html>

來源

2011-05-05 Sanjay

Dunno。你期望它做什麼？ – awm 2011-05-05 02:34:19

您的代碼缺少文檔類型，並且存在拼寫錯誤。

文檔類型：

<!DOCTYPE html>

錯字：

http://ajax.googleapis.com?/ajax/libs/jquery/1/jquery.min.js

應該是

http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

固定碼：

<!DOCTYPE html> 
<html> 
     <head> 
       <title>Learning the basics of canvas</title> 
       <meta charset="utf-8"> 
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
       <script> 
         //<![CDATA[ 
         $(document).ready(function() { 
         var canvas = $("#myCanvas"); 
         var context = canvas.get(0).getContext("2d"); 
         context.fillRect(40, 40, 100, 100); 
         }); 
         //]]> 
       </script> 
     </head> 
     <body> 
       <canvas id="myCanvas" width="500" height="500"> 
         <!-- Insert fallback content here --> 
       </canvas> 
     </body> 
</html>

來源

2011-05-05 02:35:41 mc10

您需要一個DOCTYPE。在頁面頂部插入<!DOCTYPE html>

來源

2011-05-05 02:35:15

我不認爲doctype是獲得此代碼工作所必需的;從googleapis.com網址中刪除'''似乎工作：http://jsfiddle.net/VmRVg/ – 2011-05-05 02:38:04

是的，但它是一個好東西添加像IE瀏覽器，將恢復到XHTML 4 – 2011-05-05 02:41:04

@Thomas： '

-1

嘗試canvas.getContext('2d')，沒有介入get(0)。

來源

2011-05-05 02:35:32

Downvoted是因爲'get（0）'（或'[0]'）是從DOM對象中獲取DOM'HTMLCanvasElement'所必需的。 – Phrogz 2011-05-05 02:45:28

jquery還是新的，我習慣直接使用DOM獲取它。謝謝（你的）信息。 – 2011-05-05 08:06:44

添加HTML 5 DOCTYPE標記。許多瀏覽器默認仍然呈現XHTML，並且需要您指出這是HTML 5格式。

http://www.w3schools.com/html5/tag_doctype.asp

來源

2011-05-05 02:35:51 crockpotveggies

我認爲任何瀏覽器都沒有打開實際的HTML5解析器，並且'

這就是說，根據托馬斯的評論[他的答案]（http://stackoverflow.com/questions/5892011/why-isnt-this-javascript-drawing-a-rectangle-in-my -canvas-tag/5892032＃5892032），如果您錯過了將其放入標準模式的文檔類型之一，則IE 9將恢復爲兼容模式，然後將無法呈現標記爲'

爲什麼這個JavaScript在我的<canvas>標籤上畫一個矩形？

回答

相關問題