admin管理员组

文章数量:1313120

I've followed tutorials regarding creating a canvas, however it is not working and neither is the rectangle drawn on it. Is it a necessity to have the script in the <head>? Any help would be appreciated!

Here's a JSFiddle with my code.

<!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=":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>

I've followed tutorials regarding creating a canvas, however it is not working and neither is the rectangle drawn on it. Is it a necessity to have the script in the <head>? Any help would be appreciated!

Here's a JSFiddle with my code.

<!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/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>
  • javascript
  • canvas
Share Improve this question edited May 3, 2013 at 0:36 Þaw 2,0574 gold badges22 silver badges40 bronze badges asked May 3, 2013 at 0:18 user1554786user1554786 2472 gold badges10 silver badges21 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 2

I've cleaned up your code you had a few spaces that were causing problems.

Also when you use the script tag set the type attribute:

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

Here's a corrected Fiddle: http://jsfiddle/8bK4y/

Edit: As pointed out below type attribute is not needed for the HTML5 Doctype.

i think you need to remove ">" from this also remove the extra spaces

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

to bee like so

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

本文标签： javascriptCanvas not showingStack Overflow

版权声明：本文标题：javascript - Canvas not showing - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741910656a2404424.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。