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
Search WWH ::




Custom Search