Brückenkurs Websites und Webapps/Canvas I

Wiki-Quelltext dieser Seite.

<language>Javascript</language>
Das ProgrammingWiki unterstützt einige [[Canvas_Befehle | Canvas Befehle]]. Ein Canvas ist eine rechteckige Leinwand, auf die wir mittels Javascript zeichnen können.

<canvas></canvas>

'''Beispiel'''

Wir zeichnen eine Linie vom Punkt x=0,y=0 (linke obere Ecke des Canvas) zum Punkt x=50,y=50:
<code id="58cf090da8fbf">
function draw(){

  canvas.clear();
  canvas.line(0,0,50,50);
}
</code>
<run id="58cf090da90f9">
draw();
</run>


Wir zeichnen eine Linie vom Punkt x=5,y=0 (oberer Rand des Canvas) zum Punkt x=50,y=200 (unterer Rand des Canvas):
<code id="58cf090da902d">
function draw(){

  canvas.clear();
  canvas.line(5,0,50,200);
}
</code>
<run id="58cf090da915f">
draw();
</run>


Wir zeichnen ein Liniengitter:
<code id="58cf090da908d">
function draw_lines(){
  
  canvas.clear();

  for(var x = 5; x <= 500; x = x + 10){
     
    canvas.line(x, 0, x, 200);
   
  }
}
</code>
<run id="58cf090da91c5">
draw_lines();
</run>