我遵循了有关创建画布的教程，但是它不起作用，也没有在其上绘制矩形。是否有必要在<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>
我已经清理了您的代码，您有一些空格导致了问题。
另外，当您使用 script 标签时，请设置 type 属性：
<script type="text/javascript">
// your code here
</script>
这是一个更正的小提琴： http: //jsfiddle.net/8bK4y/
编辑：正如下面指出的，HTML5 Doctype 不需要 type 属性。
| 归档时间： |
|
| 查看次数： |
11317 次 |
| 最近记录： |