HTML and CSS Reference
In-Depth Information
<head>
<head>
<meta
<meta charset=
"UTF-8"
>
<title>
<title>
CH5EX11: Moving On A Cubic Bezier Curve
</title>
</title>
<
script src
=
"modernizr.js"
><
/script>
<
script type
=
"text/javascript"
>
window
.
addEventListener
(
'load'
,
eventWindowLoaded
,
false
false
);
function
function
eventWindowLoaded
() {
canvasApp
();
}
function
function
canvasSupport
() {
return
return
Modernizr
.
canvas
;
}
function
function
canvasApp
() {
iif
(
!
canvasSupport
()) {
return
return
;
}
var
new
Image
();
pointImage
.
src
=
"point.png"
;
var
pointImage
=
new
function
function
drawScreen
() {
context
.
fillStyle
=
'#EEEEEE'
;
context
.
fillRect
(
0
,
0
,
theCanvas
.
width
,
theCanvas
.
height
);
//Box
context
.
strokeStyle
=
'#000000'
;
context
.
strokeRect
(
1
,
1
,
theCanvas
.
width
-
2
,
theCanvas
.
height
-
2
);
var
var
t
=
ball
.
t
;
var
var
cx
=
3
*
(
p1
.
x
-
p0
.
x
)
var
var
bx
=
3
*
(
p2
.
x
-
p1
.
x
)
-
cx
;
var
var
ax
=
p3
.
x
-
p0
.
x
-
cx
-
bx
;
var
var
cy
=
3
*
(
p1
.
y
-
p0
.
y
);
var
var
by
=
3
*
(
p2
.
y
-
p1
.
y
)
-
cy
;
var
var
ay
=
p3
.
y
-
p0
.
y
-
cy
-
by
;
var
var
xt
=
ax
*
(
t
*
t
*
t
)
+
bx
*
(
t
*
t
)
+
cx
*
t
+
p0
.
x
;
var
var
yt
=
ay
*
(
t
*
t
*
t
)
+
by
*
(
t
*
t
)
+
cy
*
t
+
p0
.
y
;
ball
.
t
+=
ball
.
speed
;