HTML and CSS Reference
In-Depth Information
context
.
beginPath
();
context
.
arc
(
ball
.
x
,
ball
.
y
,
15
,
0
,
Math
.
PI
*
2
,
true
true
);
context
.
closePath
();
context
.
fill
();
}
var
var
speed
=
5
;
var
var
p1
=
{
x
:
20
,
y
:
250
};
var
var
p2
=
{
x
:
480
,
y
:
250
};
var
var
dx
=
p2
.
x
-
p1
.
x
;
var
var
dy
=
p2
.
y
-
p1
.
y
;
var
var
distance
=
Math
.
sqrt
(
dx
*
dx
+
dy
*
dy
);
var
var
moves
=
distance
/
speed
;
var
var
xunits
=
(
p2
.
x
-
p1
.
x
)
/
moves
;
var
var
yunits
=
(
p2
.
y
-
p1
.
y
)
/
moves
;
var
var
ball
=
{
x
:
p1
.
x
,
y
:
p1
.
y
};
var
var
points
=
new
new
Array
();
theCanvas
=
document
.
getElementById
(
"canvasOne"
);
context
=
theCanvas
.
getContext
(
"2d"
);
function
function
gameLoop
() {
window
.
setTimeout
(
gameLoop
,
20
);
drawScreen
()
}
gameLoop
();
}
<
/script>
</head>
</head>
<body>
<body>
<div
<div style=
"position: absolute; top: 50px; left: 50px;"
>
<canvas
<canvas id=
"canvasOne"
width=
"500"
height=
"500"
>
Your browser does not support HTML5 Canvas.
</canvas>
</canvas>
</div>
</div>
</body>
</body>
</html>
</html>
