RSS-logo mit <canvas>
Das format RSS ist nicht mehr ganz so verbreitet, wie noch vor ein paar jahren. Je technischer und informativer eine website ist, umso eher findet man dort aber das RSS-logo, das von Mozilla entwickelt wurde.
HTML5 ist im WWW inzwischen allgegenwärtig. Viele der neuerungen werden schon von allen browsern unterstützt. Interessant ist unter anderem das neue element <canvas>, das das zeichnen erlaubt.
Im folgenden werden wir <canvas> dazu nutzen, ein RSS-logo zu zeichnen. Ganz ohne grafikdatei.
Vorbemerkungen
Grundlegende kenntnisse in HTML und JavaScript werden vorausgesetzt.
Das logo hat eine größe von 24x24 pixel, zur verdeutlichung wird es hier aber im format 48x48 dargestellt. Zum vergleich steht eine gif-datei in gleicher größe davor.
Canvas
Zuerst fügen wir das <canvas>-element in das HTML ein:
<canvas id="rss" width="24" height="24"></canvas>
Wichtig ist das id-attribut (id="rss"), damit das JavaScript, das das eigentliche zeichnen übernimmt, den canvas auch findet. Zu sehen ist bis jetzt übrigens nichts. Der canvas ist transparent, also noch unsichtbar.
JavaScript
Wir fügen im kopf der datei einen JavaScript-bereich ein und schreiben eine funktion zeichnen():
<script type="text/javascript">
function zeichnen(){
var canvas = document.getElementById('rss');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
}
}
</script>
In den gelisteten zeilen suchen wir zuerst den canvas anhand der id und stellen danach sicher, dass der browser den entsprechenden code für die weitere arbeit auch unterstützt. Ein zeichnen in 3D ('3d') ist in HTML5 derzeit übrigens nicht geplant.
Zeichnen
Für unser logo brauchen wir einen orangen hintergrund. Da <canvas> aber via CSS nur einen rahmen bekommen kann und keinen hintergrund, müssen wir ein rechteck zeichnen, dass genauso groß ist, wie der ganze canvas. Es erstreckt sich von links oben (0,0) bis rechts unten (24,24):
ctx.fillStyle = 'rgb(236,138,68)';
ctx.fillRect(0,0,24,24);
Die linien definieren wir als viertelkreisbögen in weiß. Sie haben denselben mittelpunkt (4,21) und verschiedenen radius (15 bzw. 10).
ctx.strokeStyle = "#ffffff";
ctx.lineWidth = 3;
ctx.beginPath();
ctx.arc(4,21,15,Math.PI*3/2,0,false);
ctx.moveTo(4,11);
ctx.arc(4,21,10,Math.PI*3/2,0,false);
ctx.moveTo(8,18);
ctx.arc(7,18,1,Math.PI*2,0,false);
ctx.stroke();
Ganz zum schluß definieren wir den punkt als kreis mit kleinem radius (1). Die Math.PI-angaben beziehen sich auf die ausgangs- bzw. endpunkte der kreislinien. Diese werden als winkel in Radiant (rad) angegeben. Math.PI*3/2 ist dabei oben, 0 ist rechts und in unserem fall der endpunkt. Details zur einheit Radiant gibt es bei Wikipedia.
Das letzte argument in der klammer ist die eigenschaft anticlockwise. In unserem fall ist sie false, weil die viertelkreise von oben nach rechts (= im uhrzeigersinn) gezeichnet werden. Der befehl ctx.moveTo() verhindert, dass die endpunkte einer linie mit dem ausgangspunkt der nächsten verbunden werden. Somit bleiben die (viertel-)kreise getrennt.