Leinwände in JavaScript

Eine Leinwand ist eine Zeichenfläche fester Größe, ihr HTML-Typ ist »canvas«.

Zu einer Leinwand kann mit »getContext« ein Maler erhalten werden, der dann Funktionen zum Bemalen der Leinwand enthält.

main.html

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<title>Main</title><style type="text/css">
</style></head><body>
<canvas id='myCanvas' width=800 height=600></canvas>
<pre><code><script>/*<![CDATA[*/
const canvas = document.getElementById( 'myCanvas' );
const painter = canvas.getContext( '2d' );
painter.fillstyle = 'white';
painter.clearRect( 0, 0, canvas.width, canvas.height );
painter.lineWidth = 5;
painter.strokestyle = 'rgba(0,200,50)';
painter.beginPath();
painter.moveTo( 40, 80 );
painter.lineTo( 600, 200 );
painter.stroke();
/*]]>*/</script></code></pre></body></html>

Notiz Kreis mit Algorithmus von Minsky

Diese Notizen sind kein Teil des Kurses.

main.html

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<title>Main</title><style type="text/css">
</style></head><body>
<canvas id='myCanvas' width=800 height=600></canvas>
<pre><code><script>/*<![CDATA[*/
const canvas = document.getElementById( 'myCanvas' );
const context = canvas.getContext( '2d' );
context.lineWidth = 200;
context.transform( 0.01, 0, 0, 0.01, canvas.width/2, canvas.height/2 );
let x = 0; let y = -20000; 
for( let i = 0; i <= 12950; ++i ) 
{ context.beginPath();
  context.moveTo( x, y );
  [ x, y ]=[ x -( y >> 11 ), y +( x >> 11 )]
  context.lineTo( x, y );
  context.stroke(); }
/*]]>*/</script></code></pre></body></html>

Notizen

Diese Notizen sind kein Teil des Kurses.

Schildkröte

main.html

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<title>Main</title><style type="text/css">
</style></head><body>
<canvas id='canvas' width=800 height=600></canvas>
<pre><code><script>/*<![CDATA[*/
class Turtle /* as in Python */
{ constructor() 
  { this.canvas = document.getElementById( 'canvas' );
    this.context = this.canvas.getContext( '2d' );
    this.x = this.canvas.width/2;
    this.y = this.canvas.height/2; 
    this.dx = 1;
    this.dy = 0; 
    this.down = 1; }
  penup( r )
  { this.down = 0; }
  dot()
  { this.context.beginPath();
    this.context.arc( this.x, this.y, 5, 0, 2*Math.PI, 0 );
    this.context.fill();
    this.context.stroke(); }
  advance( r )
  { [ this.x, this.y ]=
    [ this.x + r * this.dx, this.y + r * this.dy ] }
  forward( r )
  { if( this.down )
    { this.context.beginPath();
      this.context.moveTo( this.x, this.y ); 
      this.advance( r );
      this.context.lineTo( this.x, this.y );
      this.context.stroke(); }
    else advance( r ); }
  left( a )
  { const x = a / 180. * Math.PI;
    const c = Math.cos( x );
    const s = Math.sin( x );
    [ this.dx, this.dy ]=
    [ c * this.dx + s * this.dy, -s * this.dx + c * this.dy ]; }}
const turtle = new Turtle();
ngon = n =>
{ for( let i = 0; i < n; ++i )
  { turtle.dot();
    turtle.forward( 360/n );
    turtle.left( 360/n ); }};
ngon( 5 );
/*]]>*/</script></code></pre></body></html>

Farbrotation

main.html

<p><img    id=image  width=271 height=271 src="image.jpg" /></p>
<p><canvas id=canvas width=271 height=271></canvas></p>
<script>
image.addEventListener( 'load', e => {
  context=canvas.getContext( '2d' );
  context.clearRect( 0, 0, 271, 271 );
  context.filter = "hue-rotate( " + Math.random() * 360 + "deg )";
  context.drawImage( image, 0, 0, 271, 271 ); });
  </script>