<!DOCTYPE html><html><body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
<script>'use strict';
//Zeichenflächen-Element in HTML bekommt durch JavaScript Grafikobjektevar c = document.getElementById("myCanvas");var ctx = c.getContext("2d");
//Klassen für die Objekteclass Teilchen{ constructor(Radius,Farbe){ctx.beginPath(); this.Radius=Radius; this.Farbe=Farbe; } zeichnen(x,y){ this.x=x; this.y=y; ctx.beginPath(); ctx.arc(this.x, this.y, this.Radius, 0, 2 * Math.PI); ctx.fillStyle = this.Farbe; ctx.fill(); ctx.stroke(); } bewegen(vx,vy){ this.vx=vx; this.vy=vy; var dt=1; var dx=this.vx*dt; var dy=this.vy*dt; this.x=this.x+dx; this.y=this.y+dy; } static Animation(){ ctx.clearRect(0, 0, c.width, c.height); if (Photon.y<=150){ Photon.zeichnen(Photon.x,Photon.y); Photon.bewegen(0,1); } if (Photon.y>150){ if (Elektron.y>30){ Elektron.zeichnen(Elektron.x,Elektron.y); Elektron.bewegen(0,-1); } if (Loch.y<270){ Loch.zeichnen(Loch.x,Loch.y); Loch.bewegen(0,1); } Elektron.zeichnen(Elektron.x,Elektron.y); Loch.zeichnen(Loch.x,Loch.y); } Dotierungpositiv.zeichnen(50,100,c.width-100,5); Dotierungnegativ.zeichnen(50,200,c.width-100,20); window.requestAnimationFrame(Teilchen.Animation); }}class Dotierung{ constructor(Ladung){ this.Ladung=Ladung; } zeichnen(x,y,l,b){ this.x=x; this.y=y; this.l=l; this.b=b; ctx.fillStyle = this.Ladung; ctx.fillRect(this.x, this.y, this.l, this.b); }}
//Zeichnung und Animation der Objektevar Photon=new Teilchen(20,"white");Photon.zeichnen(c.width/2,20);var Elektron=new Teilchen(10,"blue");Elektron.zeichnen(c.width/2,150);var Loch=new Teilchen(10,"red");Loch.zeichnen(c.width/2,150);var Dotierungpositiv=new Dotierung("red");var Dotierungnegativ=new Dotierung("blue");Teilchen.Animation();
</script>
</body></html>