HTML and CSS Reference
In-Depth Information
Next, the
highlightTile()
function copies the new pixel data (with no red line around
it yet) from the canvas and places it in the
ImageData
instance:
ImageData = context.getImageData(x,y,32,32);
The
ImageData
variable now contains a copy of the pixel data for the tile from the canvas.
We then loop through the pixels in
ImageData.data
(as described previously in
“How
ImageData.data is organized” on page 160
), and set the alpha value of each to
128
.
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 startX = Math.floor(tileId % 8) *32;
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 lang="en">
<head>
<meta charset="UTF-8">
<title>CH4EX16: Tile Stamper Application</title>
<script src="modernizr-1.6.min.js"></script>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {
canvasApp();
}
function canvasSupport () {
return Modernizr.canvas;
}
function canvasApp(){
if (!canvasSupport()) {
return;
}else{
var theCanvas = document.getElementById("canvas");
var context = theCanvas.getContext("2d");
}
var mouseX;
var mouseY;
var tileSheet = new Image();
tileSheet.addEventListener('load', eventSheetLoaded , false);
tileSheet.src = "tanks_sheet.png";
