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);    
 }  
}

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);

Canvas Demo 1

Aufgabe 3

Grafiken zeichnen

Suche