RSS-logo mit <canvas>
Verschönern
Eigentlich aber ist der hintergrund in unserem gif nicht einfärbig. Wir brauchen einen farbverlauf (wieder von links oben nach rechts unten):
var verlauf = ctx.createLinearGradient(0,0,24,24);
verlauf.addColorStop(0, 'rgb(236,138,68)');
verlauf.addColorStop(0.5, 'rgb(252,158,60)');
verlauf.addColorStop(1, 'rgb(220,98,44)');
Wir nehmen unseren bisherigen hintergrund als ausgangsfarbe (0), ein helles orange für die mitte (0.5) und ein dünkleres für das ende (1). Wir weisen dem fillStyle dann statt der farbe (s.o.) ganz einfach die variable des verlaufs zu.
ctx.fillStyle = verlauf;
Verschönern II
»Eigentlich hat unser logo aber abgerundetete ecken. Wie stelle ich die her?«
Antwort: Gar nicht! Für das canvas-element ist ein rechteck ein rechteck und damit basta.
Wir müssen daher die figur selbst zeichnen:
ctx.beginPath();
ctx.moveTo(0,5);
ctx.quadraticCurveTo(0,0,5,0);
ctx.lineTo(19,0);
ctx.quadraticCurveTo(24,0,24,5);
ctx.lineTo(24,19);
ctx.quadraticCurveTo(24,24,19,24);
ctx.lineTo(5,24);
ctx.quadraticCurveTo(0,24,0,19);
ctx.fill();
Wir beginnen ganz links, fünf pixel unter der oberkante (0,5). Von dort geht es in einem bogen zum punkt ganz oben fünf pixel von links (5,0). Bezugspunkt ist dabei der eckpunkt (0,0). Danach ziehen wir ein linie bis fünf pixel vor dem rechten rand (19,0), kurven nach unten usw usf. Nach dem letztem bogen links unten brauchen wir keine linie hinauf; ctx.fill() erledigt das für uns.
Internet Explorer
Der gevifte entwickler stellt sich nun die frage: »Und wie schaut das ganze im IE aus?« Bis IE8 in etwa so:
Genau, gähnende leere. Der IE8 beherrscht kein HTML5. Für Windows XP gibt es aber keine neuere version. Was also tun? Nette menschen bei Google haben ein skript geschrieben, das die neuheiten in VML-befehle umwandelt, die der IE beherrscht. Wir brauchen es nur auf unseren webspace zu laden und vor dem script-block in den head einzubinden:
<!--[if lt IE 9]><script src="excanvas.js"></script><![endif]-->
Wir haben das schon von anfang an getan, darum konnten die beispiele hier auch von jenen gelesen werden, die mit dem IE 8 im web unterwegs sind.
schlussbemerkungen
- Mit dem element <canvas> könnte man z.b. das eigene logo zeichnen und sich damit bilddateien ersparen, die oft erst mit verzögerung im browser erscheinen. Oder anders betrachtet: Man muss die seite nicht trickreich auf die bilddateien warten lassen, damit das eigene logo gleich von anfang an angezeigt wird.
- Wenn JavaScript im browser deaktiviert ist, wird natürlich auch kein <canvas> angezeigt.
- Excanvas.js für den IE funktioniert zwar recht gut, der zusätzliche übersetzungsschritt geht aber auf kosten der geschwindigkeit. Aufwändige bewegte dinge laufen meist nur in zeitlupe.
download
Die fertige datei mit dem endgültigen code und dem kompletten HTML kann heruntergeladen werden.
Um die datei mit dem IE zu verwenden, braucht man das excanvas-skript wie oben beschrieben.