Menu
Community /Pin to ProfileBookmark
@cootheadAug 21.2015 — #Hi there Zukias,
[indent]
this...
...works OK for me in [i]"Firefox 40.0.2"[/i], [i]"Chrome 44.0.2"[/i], [i]"IE11"[/i] and [i]"Opera 31.0"[/i]. ?
[/indent]
[i]coothead[/i]
Basic question (element attributes & function invocation)
The following code make a square move left to right, back and forth:
[CODE]<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body onLoad=”animate()”>
<canvas id=”canvas” width=”800″ height=”800″></canvas>
<script>
var canvas = document.getElementById(‘canvas’);
var context = canvas.getContext(‘2d’);
var X = 0;
var Y = 10;
var goRight = true;
var Draw = {
rectangle: function (x, y) {
context.beginPath();
context.rect(x, y, 10, 10);
context.fillStyle = ‘#8ED6FF’;
context.fill();
context.lineWidth = 5;
context.strokeStyle = ‘black’;
context.stroke();
}
}
function animate() {
if (X < 800 && goRight) {
X += 10;
} else if (X > 0 || !goRight) {
X -= 10;
goRight = (X <= 0); // reset direction once we hit 0;
}
context.clearRect(0, 0, canvas.width, canvas.height);
Draw.rectangle(X, Y);
window.requestAnimationFrame(animate);
}
</script>
<button onclick=”animate()”>test</button>
</body>
</html>
However, when I remove the ‘onLoad’ attribute from the body element, I thought that clicking the ‘Test’ button should make the rectangle animate in the same way, but nothing happens. Why is this?
Sign in
to post a comment1 Comments(s) ↴
0
@cootheadAug 21.2015 — #Hi there Zukias,[indent]
this...
[color=navy]
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>untitled document</title>
<style media="screen">
body {
margin:0;
}
#but{
display:block;
}
#canvas {
display:block;
}
p {
width:800px;
}
</style>
</head>
<body>
<button id="but">start</button>
<canvas id="canvas" width="800" height="30"></canvas>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec ultricies sollicitudin nisi, ut molesti.
</p>
<script>
(function() {
'use strict';
var b=document.getElementById('but'),test=true,wraf;
b.onclick=function() {
test===true?
(window.requestAnimationFrame(animate),test=false,b.innerHTML='stop'):
(window.cancelAnimationFrame(wraf),test=true,b.innerHTML='start');
}
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
var X=0;
var Y=10;
var goRight=true;
var Draw={
rectangle:function (x,y) {
context.beginPath();
context.rect(x,y,10,10);
context.fillStyle='#8ed6ff';
context.fill();
context.lineWidth=5;
context.strokeStyle='#000';
context.stroke();
}
}
function animate() {
if((X<800)&&(goRight)) {
X+=10;
}
else {
if((X>0)||(!goRight)) {
X-=10;
goRight=(X<=0); // reset direction once we hit 0;
}
}
context.clearRect(0,0,canvas.width,canvas.height);
Draw.rectangle(X,Y);
wraf=window.requestAnimationFrame(animate);
}
})();
</script>
</body>
</html>[/color]...works OK for me in [i]"Firefox 40.0.2"[/i], [i]"Chrome 44.0.2"[/i], [i]"IE11"[/i] and [i]"Opera 31.0"[/i]. ?
[/indent]
[i]coothead[/i]