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
);