动画画布

Question

I have a rectangle (which should appear) on a canvas, that I want to move from side to side of the canvas. 我在画布上有一个矩形（应该出现），我想从画布的一侧移到另一侧。 The code I have atm however isn't working, as nothing is showing up at all! 但是，我拥有的atm代码无法正常工作，因为根本没有显示任何内容！ Any help would be appreciated, cheers! 任何帮助将不胜感激，加油！

<!DOCTYPE html>
<html>
<head>
 <title>Simple animations in HTML5</title>

<!--<script> 
 var canvas = document.getElementById("myCanvas"); 
 var context = canvas.getContext("2d"); 
 context.fillStyle = "blue";
 context.fillRect (20, 50, 200, 100); 
</script> -->

<script>
function drawMessage()
var canvas = document.getElementById("myCanvas"); 
var context = canvas.getContext("2d"); 
context.fillStyle = "blue";
context.fillRect(x, y, WIDTH, HEIGHT);
context.fillStyle = "white";
context.font = "30px Arial";
context.fillText ("Hello World", MESSAGE_WIDTH, MESSAGE_HEIGHT); 

x += dx;
y += dy;

if(x <= 0 || x >= 500)
{
   dx = -dx;
}
   if(y <= 0 || y >= 200)
{
dy = -dy
}

function animate()
{
    return setInterval(drawMessage, 10);
}

</script>

</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 type="text/javascript">
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"> 
</canvas>

<!--<script type="text/javascript"> 
 var canvas = document.getElementById("myCanvas"); 
 var context = canvas.getContext("2d"); 
 context.fillStyle = "blue";
 context.fillRect(20, 50, 200, 100);
 context.fillStyle = "white";
 context.font = "30px Arial";
 context.fillText ("Hello World", 35, 110); 
 </script> -->

<script> 
var canvas = document.getElementById("myCanvas"); 
var context = canvas.getContext("2d"); 
var x = 20; // x coordinate of box position 
var y = 50; // y coordinate of box position 
var dx = 2; // amount to move box to the right 
var dy = 4; // amount to move box down 
var WIDTH = 500; // width of canvas 
var HEIGHT = 200; // height of canvas 
var MESSAGE_WIDTH = 200; // width of message 
var MESSAGE_HEIGHT = 100; // height of message 
animate(); // run the animation 
</script>

</body>
</html>

Answer 1

It seems to me like the first script portion of your code might be missing curly braces. 在我看来，您的代码的第一个脚本部分可能缺少花括号。 Specifically, the portion: 具体来说，该部分：

function drawMessage()
var canvas = document.getElementById("myCanvas"); 
var context = canvas.getContext("2d"); 
context.fillStyle = "blue";
context.fillRect(x, y, WIDTH, HEIGHT);
context.fillStyle = "white";
context.font = "30px Arial";
context.fillText ("Hello World", MESSAGE_WIDTH, MESSAGE_HEIGHT); 

x += dx;
y += dy;

if(x <= 0 || x >= 500)
{
   dx = -dx;
}
   if(y <= 0 || y >= 200)
{
dy = -dy
}

Might work better as: 可能会更好地工作，因为：

function drawMessage()
{
var canvas = document.getElementById("myCanvas"); 
var context = canvas.getContext("2d"); 
context.fillStyle = "blue";
context.fillRect(x, y, WIDTH, HEIGHT);
context.fillStyle = "white";
context.font = "30px Arial";
context.fillText ("Hello World", MESSAGE_WIDTH, MESSAGE_HEIGHT); 

x += dx;
y += dy;

if(x <= 0 || x >= 500)
{
   dx = -dx;
}
   if(y <= 0 || y >= 200)
{
dy = -dy
}
}

动画画布

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-05-03 01:40:18

动画画布

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-05-03 01:40:18

解决方案1
1 已采纳 2013-05-03 01:40:18