In de wapperende vlag script procedure heb ik deze afbeelding gebruikt. Kopieer die naar jouw webruimte om deze procedure even te testen. De waving flag procedure is er één van het soort "progressive enhancement". Gebrekkige en stokoude (IE) browsers krijgen alleen een plaatje te "zien". Is jouw browser 'uit het goede hout gesneden' wordt de afbeelding ge-animeerd. Als het goed is heb jij een moderne browser en zal alles al geheel duidelijk zijn voor wat betreft het script doet... Kopieer de html-code naar de body sectie van jouw pagina, en doe dit ook met het javascript (wat zo laag als mogelijk geplaatst dient te worden). Het script is foutloos volgens de strenge JSLint-norm, en ook de rest van de code valideert volkomen (zoals het hoort).
<canvas id="vlag"></canvas>
<!--[if lt IE 9]>
<img src='wave-flag.jpg' width="279" height="118" alt="waving flag afbeelding" />
<![endif]-->
<script>
var x, y, waving_image = new Image();
waving_image.src = 'wave-flag.jpg';
function wave_de_vlag(canvas, wave_lengte, uitslag, loop_tijd, kleur_verloop, afknijpen) {
if (!afknijpen) {
afknijpen = 0;
}
if (!kleur_verloop) {
kleur_verloop = 100;
}
if (!loop_tijd) {
loop_tijd = 200;
}
if (!uitslag) {
uitslag = 10;
}
if (!wave_lengte) {
wave_lengte = canvas.width / 10;
}
var fps = 10;
var ctx = canvas.getContext('2d');
var w = canvas.width,
waving_image = canvas.height;
var od = ctx.getImageData(0, 0, w, waving_image).data;
return setInterval(function() {
var id = ctx.getImageData(0, 0, w, waving_image);
var d = id.data;
var now = new Date() / loop_tijd;
for (y = 0; y < waving_image; ++y) {
var lastO = 0,
shade = 0;
var sq = (y - waving_image / 2) * afknijpen;
for (x = 0; x < w; ++x) {
var px = (y * w + x) * 4;
var pct = x / w;
var o = Math.sin(x / wave_lengte - now) * uitslag * pct;
var y2 = y + (o + sq * pct) << 0;
var opx = (y2 * w + x) * 4;
shade = (o - lastO) * kleur_verloop;
d[px] = od[opx] + shade;
d[px + 1] = od[opx + 1] + shade;
d[px + 2] = od[opx + 2] + shade;
d[px + 3] = od[opx + 3];
lastO = o;
}
}
ctx.putImageData(id, 0, 0);
}, 1000 / fps);
}
waving_image.onload = function() {
var waving_flag = document.getElementById('vlag');
var amp = 10;
waving_flag.width = waving_image.width;
waving_flag.height = waving_image.height + amp * 2;
waving_flag.getContext('2d').drawImage(waving_image, 0, amp, waving_image.width, waving_image.height);
waving_flag.style.marginLeft = 0 + 'px';
waving_flag.style.marginTop = 0 + 'px';
var timer = wave_de_vlag(waving_flag, waving_image.width / 10, amp);
};
</script>