Canvas: Deutschland Flagge

2014-07-14 von admin

Glückwunsch an unsere Nationalmannschaft zum Gewinn der WM 2014.

Flagge

Damit der Browser auch komplett in den drei Farben glänzen kann, gibt es hier die entsprechende Seite dazu.

function mwFlagge() {
	var t = this;
	t.canvas = null;
	t.ctx = null;		//canvas context 
	t.y;

	t.run = function(){
		t.init();
	}

	t.init = function(){
		t.canvas = document.getElementById('main');
		t.calculate();
		t.ctx = t.canvas.getContext('2d');

		window.addEventListener("resize", function(e) {
			e.preventDefault();
			t.resize();
		}, false);

		draw();
	}

	t.calculate = function(){
		t.canvas.width = window.innerWidth;
		t.canvas.height = window.innerHeight;
		t.y = window.innerHeight / 3;		
	}

	t.resize = function() {
		t.calculate();
		draw();
	}

	function draw(){

		t.ctx.beginPath();
		t.ctx.fillStyle = "#000000";
		t.ctx.fillRect(0,0,window.innerWidth,t.y);

		t.ctx.fillStyle = "#DD0000";
		t.ctx.fillRect(0,t.y,window.innerWidth,t.y);

		t.ctx.fillStyle = "#FFCE00";
		t.ctx.fillRect(0,t.y*2,window.innerWidth,t.y*2);

		t.ctx.stroke();
	}
}

Hier gehts zur Live Demo.
Download: Flagge.zip

Kategorie: Programmierung Schlagwörter: , ,