HTML and CSS Reference
In-Depth Information
function
function
videoLoaded
() {
canvasApp
();
}
function
function
canvasApp
() {
iif
(
!
canvasSupport
()) {
return
return
;
}
function
function
drawScreen
() {
context
.
fillStyle
=
'#000000'
;
context
.
fillRect
(
0
,
0
,
theCanvas
.
width
,
theCanvas
.
height
);
//Box
context
.
strokeStyle
=
'#ffffff'
;
context
.
strokeRect
(
1
,
1
,
theCanvas
.
width
-
2
,
theCanvas
.
height
-
2
);
//Place videos
context
.
fillStyle
=
"#FFFF00"
;
var
var
video
;
for
for
(
var
var
i
=
0
;
i
<
videos
.
length
;
i
++
) {
video
=
videos
[
i
];
video
.
x
+=
video
.
xunits
;
video
.
y
+=
video
.
yunits
;
context
.
drawImage
(
videoElement
,
video
.
x
,
video
.
y
,
video
.
width
,
video
.
height
);
iif
(
video
.
x
>
theCanvas
.
width
-
video
.
width
||
video
.
x
<
0
) {
video
.
angle
=
180
-
video
.
angle
;
updatevideo
(
video
);
}
else
else iif
(
video
.
y
>
theCanvas
.
height
-
video
.
height
||
video
.
y
<
0
) {
video
.
angle
=
360
-
video
.
angle
;
updatevideo
(
video
);
}
}
}
function
function
updatevideo
(
video
) {
video
.
radians
=
video
.
angle
*
Math
.
PI
/
180
;
video
.
xunits
=
Math
.
cos
(
video
.
radians
)
*
video
.
speed
;
video
.
yunits
=
Math
.
sin
(
video
.
radians
)
*
video
.
speed
;