Canvas: Do you recognize it?
2015-10-29 von Mario
Kategorie: IT Schlagwörter: Canvas, fighters, IT
Canvas: Pixel Matrix
2015-03-29 von Mario
Canvas: Erkennst Du die hier auch?
2015-03-15 von Mario
Canvas: Erkennst Du sie?
2015-03-12 von Mario
Inspiriert durch ein Bild, habe ich eine relativ bekannte Familie mit Canvas gezeichnet.
Hier gehts zur Live Demo.
Download: Familie_S.zip
Canvas: Deutschland Flagge
2014-07-14 von Mario
Glückwunsch an unsere Nationalmannschaft zum Gewinn der WM 2014.
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
Canvas Glider
2014-07-11 von Mario
Ein kleines Vergnügen war die Erstellung des Hackeremblem bzw. des Glider aus dem Spiel “Conway’s Game of Life“. Zum Einsatz kam CSS, HTML5 und Canvas.
Hier gehts zur Live Demo.
Download: GliderAnimation.zip