HTML and CSS Reference
In-Depth Information
Finally, now that the ImageData variable contains the correct pixels with the altered alpha
values, we can draw the red line around the tile that's been selected to stamp on the tile map:
var
var startX = Math . floor ( tileId % 8 ) * 32 ;
var
var startY = Math . floor ( tileId / 8 ) * 32 ;
context . strokeStyle = "red" ;
context . strokeRect ( startX , startY , 32 , 32 )
Example 4-16 is the entire set of code for this application.
Example 4-16. The Tile Stamper application
<!doctype html>
<html
<html lang= "en" >
<head>
<head>
<meta
<meta charset= "UTF-8" >
<title>
<title> CH4EX16: Tile Stamper Application </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 ;
} else
else {
var
var theCanvas = document . getElementById ( "canvas" );
var
var context = theCanvas . getContext ( "2d" );
}
var
var mouseX ;
var
var mouseY ;
var
var tileSheet = new
new Image ();
tileSheet . addEventListener ( 'load' , eventSheetLoaded , false
false );
tileSheet . src = "tanks_sheet.png" ;
var
var imageData = context . createImageData ( 32 , 32 );
Search WWH ::




Custom Search