logo blechtrottel.net blechtrottel.net
English

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

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.

zurückTeil1 - Teil2