HTML and CSS Reference
In-Depth Information
if ((shadow&4)!=0) {
context.moveTo(x1, y2-0.5); context.lineTo(x2, y2-0.5);
}
if ((shadow&16)!=0) {
context.moveTo(x1+0.5, y1); context.lineTo(x1+0.5, y2);
}
if ((shadow&64)!=0) {
context.moveTo(x1, y1+0.5); context.lineTo(x2, y1+0.5);
}
context.stroke();
if ((shadow&24) != 0) {
var t = 4;
context.fillStyle = "rgba(0,0,0,0.3)"
context.beginPath();
if ((shadow&24) == 24) { // rectangle shadow
context.rect(x1, y1, t, TILE_SIZE); //rectangle + triangle
} else if ((shadow&24) == 16) {
context.moveTo(x1 + t, y1);
context.lineTo(x1, y1);
context.lineTo(x1, y2);
context.lineTo(x1 + t, y2 - t);
context.lineTo(x1 + t, y1);
}
context.fill();
}
}
ObjectTile.prototype.auto = getTileShadow
ObjectTile.prototype.render = function(renderer, mask, x1, y1) {
Tile.prototype.render.call(this, renderer, mask, x1, y1);
drawTileShadow(renderer, mask, x1, y1);
}
<!-- MODS -->
<script src="mods/mod-shadows.js"></script>
<!-- CONFIGURATION -->
<script src="cfg/basic.js"></script>
<script src="cfg/shadows.js"></script>
...
window.app = new App([BasicConfig, ShadowConfig])
Save the code in Listing 6-3 into the configuration and modification files, respectively; then add
ShadowConfig
in
the
App
constructor, and you will see the results shown in Figure
6-1
.
