HTML and CSS Reference
In-Depth Information
context
.
closePath
();
//draw red circle at end node
context
.
beginPath
();
context
.
strokeStyle
=
"red"
;
context
.
lineWidth
=
5
;
context
.
arc
((
endNode
.
y
*
32
)
+
16
, (
endNode
.
x
*
32
)
+
16
,
10
,
0
,
(
Math
.
PI
/
180
)
*
360
,
false
false
);
context
.
stroke
();
context
.
closePath
();
//draw black circles on path
for
for
(
var
var
ctr
=
0
;
ctr
<
result
.
length
-
1
;
ctr
++
) {
var
var
node
=
result
[
ctr
];
context
.
beginPath
();
context
.
strokeStyle
=
"black"
;
context
.
lineWidth
=
5
;
context
.
arc
((
node
.
y
*
32
)
+
16
, (
node
.
x
*
32
)
+
16
,
10
,
0
,
(
Math
.
PI
/
180
)
*
360
,
false
false
);
context
.
stroke
();
context
.
closePath
();
}
}
}
<
/script>
</head>
</head>
<body>
<body>
<div
<div style=
"position: absolute; top: 50px; left: 50px;"
>
<canvas
<canvas id=
"canvas"
width=
"500"
height=
"500"
>
Your browser does not support the HTML5 Canvas.
</canvas>
</canvas>
</div>
</div>
</body>
</body>
</html>
</html>
In the final next A* example,
Example 8-18
,
we'll get to the fun part of Canvas and A*. We
are going to actually animate and move the tank through the node path.
The full code listing for
Example 8-18
follows. We'll explain the more interesting parts after
you have taken a look and have had a chance to see the example in action. The movement