畫布不顯示

我已經遵循了關於創建畫布的教程，但它不起作用，也沒有繪製矩形。是否有必要在<head>中擁有腳本？任何幫助，將不勝感激！畫布不顯示

這裏有一個JSFiddle我的代碼。

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Simple animations in HTML5</title> 
    </head> 
<body> 
<h2> Optical Illusion </h2> 
<video id="illusion" width="640" height="480" controls> 
    <source src="Illusion_movie.ogg"> 
</video> 

<div id="buttonbar"> 
    <button onclick="changeSize()">Big/Small</button> 
</div> 

<p> 
Watch the animation for 1 minute, staring at the centre of the image. Then look at something else near you. 
For a few seconds everything will appear to distort. 
Source: <a href="http://en.wikipedia.org/wiki/File:Illusion_movie.ogg">Wikipedia:Illusion  movie</a> 
</p> 

<script> 
    var myVideo=document.getElementById("illusion"); 
    var littleSize = false; 
    function changeSize() 
    { 
     myVideo.width = littleSize ? 800 : 400; 
     littleSize = !littleSize;//toggle boolean 
    } 
</script> 

<canvas id= "myCanvas " width= "500 " height= "500 "> 
    style="border:1px solid #000000;"> 
</canvas> 

<script> 
    var canvas = document.getElementById("myCanvas"); 
    var context = canvas.getContext("2d"); 
    context.fillStyle = "blue"; 
    context.fillRect(20, 50, 200, 100); 
</script> 
</body> 
</html>

來源

2013-05-03 user1554786

我已經清理你的代碼中有幾個空間導致問題。

~~此外，當您使用腳本標籤設置類型屬性：~~

~~<script type="text/javascript"> // your code here </script>~~

這裏有一個修正的小提琴：http://jsfiddle.net/8bK4y/

編輯：鍵入如下指出的屬性是不HTML5 Doctype需要。

來源

2013-05-03 00:26:31

腳本的「type」屬性在HTML5（OP所使用的）中不是必需的，並且默認爲「text/javascript」 – Ian 2013-05-03 00:30:42

謝謝，想知道爲什麼矩形沒有顯示！ – user1554786 2013-05-03 00:34:17

@我不知道，歡呼。 – 2013-05-03 01:08:09

我認爲你需要刪除「>」從這個也刪除多餘的空格

<canvas id= "myCanvas " width= "500 " height= "500 "> 
    style="border:1px solid #000000;"> 
</canvas>

成爲像這樣

<canvas id="myCanvas" width="500" height="500" style="border: 1px solid #000000;"> 
</canvas>

來源

2013-05-03 00:21:55 Waqleh

問題解決了，謝謝！ – user1554786 2013-05-03 00:22:35

回答

相關問題