画布不显示

我已经遵循了关于创建画布的教程，但它不起作用，也没有绘制矩形。是否有必要在<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

回答

相关问题