Canvas Demo 1

Aus ProgrammingWiki

Aufgabe 3

Verwende for Schleifen, um 25 farbige Rechtecke in einer Matrix von 5 mal 5 Feldern in der Zeichenfläche auszugeben. Hierfür kannst du die Befehle canvas.setColor(r,g,b) und canvas.fillRect(x1,y1,x2,y2) verwenden.

canvas.clear(); for (var i=0;i<6;i++){ for (var j=0;j<6;j++){ canvas.setColor(Math.round(255-42.5*i),Math.round(255-42.5*j),0); canvas.fillRect(j*25,i*25,25,25); canvas.setColor(0,0,0); canvas.text(j*25+7,i*25+16,"x",16); } }

ausführen

Grafiken zeichnen

Mit drawImage(x,y,w,h,URL) können Grafiken auf einen Canvas gezeichnet werden.

var url = "http://www.michael-hielscher.de/images/atocc.jpg"; canvas2.drawImage(100,50,url); canvas2.drawImage(250,50,50,50,url); canvas2.drawImage(350,50,50,100,url);

ausführen