2013-05-03 1 views
4

Я следил за учебниками относительно создания холста, однако он не работает, и ни один из них не нарисован на нем. Нужно ли иметь скрипт в <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> 

ответ

2

Я очищены ваш код имел несколько мест, которые вызывают проблемы.

Кроме того, при использовании тега сценария установите атрибут Тип:

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

Вот исправленный Fiddle: http://jsfiddle.net/8bK4y/

Edit: Как отмечалось ниже типа атрибута не необходимо для HTML5 Doctype.

+2

Атрибут «type» сценария не требуется в HTML5 (который используется OP), и по умолчанию используется «text/javascript» – Ian

+0

Спасибо, было интересно, почему прямоугольник не показывался! – user1554786

+1

@ Я не знал этого, ура. –

2

я думаю, что вам нужно удалить «>» из этого также удалить лишние пробелы

<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> 
+0

проблема решена, спасибо! – user1554786

 Смежные вопросы

  • Нет связанных вопросов^_^