5

我已经按照有关创建画布的教程进行操作，但是它不起作用，也没有在其上绘制矩形。是否有必要将脚本放在 中<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>
4

2 回答 2

2

我已经清理了你的代码，你有一些导致问题的空格。

此外，当您使用脚本标签时，请设置 type 属性：

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

这是一个更正的小提琴：http: //jsfiddle.net/8bK4y/

编辑：正如下面指出的，HTML5 Doctype 不需要 type 属性。

于 2013-05-03T00:26:31.887 回答
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>
于 2013-05-03T00:21:55.737 回答