sitemap | terug naar het html5 referentie - tags - overzicht
Alle moderne browsers (ook IE vanaf versie 9) kunnen middels de canvas tag dingen zoals hierboven "doen". Verdere uitleg lijkt mij overbodig... Hieronder het stukje javascript wat verantwoordelijk is voor het gebeuren in de canvas-tag hierboven. Met de variabele canvas_1 is de tijdsduur van deze "canvas-tag-animatie" beperkt (met een exit() ) tot enkele seconden. Verander de waarde van de variabele om de animatie langer te laten "lopen", of verwijder de gehele conditie als je de canvas-animatie continue wil laten werken. Tot slot wil ik nog opmerken dat het javascript volgens de JSLint-norm foutloos is.
Als je deze animatie op jouw website wilt gebruiken, moet je de onderstaande regel html-code ergens in de body-sectie plaatsen. Het javascript wat dááronder staat moet zo laag als mogelijk in de body-sectie geplaatst worden.
<canvas id="canvas_demo" width="200" height="200"></canvas>
<script>
/*global addEventListener: false */
/*global document: false */
/*global setInterval: false */
/*global exit: false */
var tellen,diameter;
(function () {
addEventListener('DOMContentLoaded', function () {
var canvas__ = document.getElementById('canvas_demo');
var canvas_ = canvas__.getContext('2d'),
canvas_1 = 0,
canvas_2 = 4,
PI = Math.PI;
canvas_.fillStyle = "rgba(0,0,0,.05)";
canvas_.strokeStyle = "#f55";
canvas_.lineWidth = 1;
setInterval(function () {
canvas_1 += 0.005;
canvas_2 += 0.015;
tellen = 64 + Math.cos(canvas_2) * 64;
if (canvas_1 > 2) {
exit();
}
canvas_.shadowColor = undefined;
canvas_.shadowOffsetX = 0;
canvas_.shadowOffsetY = 0;
canvas_.shadowBlur = 0;
canvas_.fillRect(0, 0, 200, 200);
canvas_.translate(100, 100);
canvas_.rotate(canvas_1);
canvas_.translate(-100, -100);
diameter = 100 + Math.sin(canvas_1 * 20) * 50;
var i = 0;
canvas_.beginPath();
canvas_.moveTo(100 + diameter, 100 + diameter);
while (i < tellen) {
canvas_.lineTo(100 + Math.sin(tellen / PI * i + canvas_1) * diameter, 100 + Math.cos(tellen / PI * i) * diameter);
i++;
}
canvas_.closePath();
canvas_.shadowColor = "#fc0";
canvas_.shadowOffsetX = 10;
canvas_.shadowOffsetY = 10;
canvas_.shadowBlur = 5;
canvas_.stroke();
}, 30);
}, false);
}());
</script>