Declare a global variable for the x-coordinate: x, to make it accessable by all functions on the page.
<script>
var
x
=
100
;
.............
</script>
A global variable is made inside the <script>-tag but outside the function.
circle
(
x
,
100
,
50
)
;
In the draw() function replace the x-coordinate parameter by our new global x-variable .
context
.
clearRect(
0
,
0
,
canvas.width
,
canvas.height
)
;
x
=
x + 10
;
animate
=
setTimeout(
draw
,
20
)
;
To create animation: * Wipe the canvas before drawing on it: clearRect(): * Change the coordinates:x+10 * Redraw afer a time-interval with setTimeout(draw,20) * Create a loop: setTimeout calls draw, draw calls setTimeout
clearTimeout(
animate
)
;
Stop the animation with: clearTimeout().
Move over the Canvas ......... .... "TryoutPanel1"
<script>
var x=0; // global variable x, change start position here
//................ add a global y variable for vertical movement
var canvas2;
var context2;
///////////////// CIRCLE FUNCTION //////////////////////
function circle(x,y,radius) {
context2.beginPath();
context2.arc(x, y, radius,0, Math.PI*2, true);
context2.fill();
context2.stroke();
}
/////////////////// DRAW //////////////////////////////////////
function draw() {
canvas = document.getElementById('canvas');
context2 = canvas.getContext('2d');
// wipe the canvas
context2.clearRect(0,0,canvas.width,canvas.height);
context2.strokeStyle = "red";
context2.fillStyle = "lightBlue";
circle(x, 100, 50); // circle(x,y,radius)
x=x+3; // adds 10 :shift 10 to right
//.......to move down you need to make a global y-variable(3) and shift it.
// make sure to use it when you draw the circle(28)
animate=setTimeout(draw,20); // calls draw() in 20 milisec
}
//////////////// STOP ////////////////////////////////////////
function stop(){
clearTimeout(animate); // stops the setTimeout.(breaks loop)
}
//////////////// START //////////////////////
function start(){
x=0; // puts shape back in position x=0
draw(); // and starts the draw() function
}
setTimeout(start,200);
</script>
<canvas id="canvas" width="500" height="400" style="border:1px solid blue;">
</canvas>
<button onclick="start()">start</button>
<button onclick="stop()">stop</button>
<ul><li>can you make the ball go <u>slower</u>,<u>faster</u>(31)</li>
<li>move from <u>*right to left?</u>(31,2)</li>
<li><b>Experts</b>: from up to down (33,28,3)</li></ul>
In this car-example, we see 2 rectangles that move together at the same speed.
Look below at the 2 rectangles of the car.
rect
(
x
,
20
,
60
,
30
)
;
rect
(
x - 40
,
50
,
150
,
50
)
;
To move all car-parts simultaneously we use the same variable : x in all parts.
Move a Multishape ......... .... "TryoutPanel2"
<script>
/////////////////// RECTANGLE /////////////////////////
function rect(x,y,widthRect,heightRect) {
context2.beginPath();
context2.rect(x,y,widthRect,heightRect);
context2.fill();
context2.stroke();
}
//////////////////// CIRCLE ////////////////////////////////
function circle(x,y,radius) {
context2.beginPath();
context2.arc(x, y, radius,0, Math.PI*2, true);
context2.fill();
context2.stroke();
}
//////////////////////////////////////////////////////////
var x=60; // global x-variable is set to 60.
var canvas2;
var context2;
///////////////////// DRAW //////////////////////////////
function draw() {
canvas = document.getElementById('canvas');
context2 = canvas.getContext('2d');
// wipe the canvas
context2.clearRect(0,0,canvas.width,canvas.height);
context2.strokeStyle = "green";
context2.fillStyle = "green";
rect(x,20,60,30); // at the start x=60
rect(x-40,50,150,50); // note: all car parts use x,
// so they move simultaniously.
//.......... give the car some wheels that also use x: circle(x,y,radius)
x=x+5; // move 5 to the right
animate=setTimeout(draw,40); // calls draw() in 40 milisec
}
//////////////////////// STOP///////////////////////
function stop(){
clearTimeout(animate); // stops the setTimeout.
}
////////////////////// START ////////////////////////
function start(){
x=60; // global x-variable back to 60
draw();
}
setTimeout(draw,100);
</script>
<p> The parts of the car move simultaneously; they all use the global x-variable</p>
<canvas id="canvas" width="500" height="200" style="border:1px solid blue;">
</canvas>
<button onclick="start()">start</button>
<button onclick="stop()">stop</button>
<ul><li>Can you give this cars some wheels?(42)</li></ul>
We use a global direction variable:dx to determine the direction of the movement.
dx is either +1 (going right) or -1 (going left),
Changing Direction......... .... "TryoutPanel3"
<script>
////////////////// CIRCLE /////////////////////////
function circle(x,y,radius) { //function creates circle
context.beginPath();
context.arc(x, y, radius,0, Math.PI*2, true);
context.fill();
context.stroke();
}
///////////////// GLOBAL VARIABLES ////////////////
var canvas;
var context;
var animate;
x=65; // global x
y=65; // global y
dx=1; // global x-direction
dy=1; // global y-direction
/////////////// DRAW //////////////////////////
function draw(){
canvas=document.getElementById('canvas');
context=canvas.getContext('2d');
context.clearRect(0,0,canvas.width,canvas.height);
context.fillStyle='red';
context.strokeStyle='blue';
circle(x,y,50);
if(x-50<=0 || x+50>= canvas.width){ dx= dx*-1;}
//....write a similar if statement for the y-coordinate
x =x+(dx*2);
y= y+(dy*0.5);
animate=setTimeout(draw,20);
}
///////////////////START /////////////////////////////
setTimeout(draw,50);
</script>
<p>The Ball escapes from the canvas at the bottom: <b>Stop him!!</b></p>
<canvas id="canvas" height="400" width="400" ></canvas>
<ul><li>Write an <b>if-statement</b> to make the ball change direction
when it reaches the bottom and top edges of the canvas(35)</li></ul>
