Das Canvas-Element
(EN google-translate)
(PL google-translate)
In das Canvas-Element kann "hinein gemalt" werden. D.h. von Javascript aus können an bestimmte Koordinaten mit bestimmten Befehlen Linien, Primitive und auch Text gesetzt werden.
Ein Beispiel soll dies demonstrieren:
<html>
<head lang="de">
<meta charset="iso-8859-1">
<script language:javascript>
let HEXA = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
var malkontext = null;
var muenzwurf_x = 0.901;
function muenzwurf()
{
muenzwurf_x = 3.92*muenzwurf_x*(1.0-muenzwurf_x);
return (Math.round(muenzwurf_x*1000.0))%2;
}
function muenzwurf1000(max)
{
var x = 0;
var y = 0;
var z = 0;
for(var i=0;i<1000;i++)
{
x+=muenzwurf();
y+=muenzwurf();
z+=muenzwurf();
}
return (x+y*103+z*911)%max;
}
//Farbbeispiele: http://html-color-codes.com/rgb.html
function farbe(r,g,b)
{
return "#"+HEXA[Math.floor(r/16)]+HEXA[r%16]+HEXA[Math.floor(g/16)]+HEXA[g%16]+HEXA[Math.floor(b/16)]+HEXA[b%16];
}
function malen()
{
//Lazy binding:
//Erst, wenn etwas benötigt wird, wird es bereitgestellt.
if(malkontext==null)
{
malkontext = document.getElementById("grafik").getContext("2d");
}
for(var i=0;i<100;i++)
{
var x = muenzwurf1000(500);//+muenzwurf10000(200)+muenzwurf10000(200);
var y = muenzwurf1000(200);
var breite = muenzwurf1000(100)+10;
var hoehe = muenzwurf1000(100)+10;
var ROT = muenzwurf1000(256);
var GRUEN = muenzwurf1000(256);
var BLAU = muenzwurf1000(256);
malkontext.fillStyle = farbe(ROT,GRUEN,BLAU);
malkontext.fillRect(x,y,breite,hoehe);
}
for(var i=0;i<100;i++)
{
var x = muenzwurf1000(500);//+muenzwurf10000(200)+muenzwurf10000(200);
var y = muenzwurf1000(200);
var breite = muenzwurf1000(100)+10;
var durchmesser = muenzwurf1000(10)+10;
var ROT = muenzwurf1000(256);
var GRUEN = 0;
var BLAU = 0;
malkontext.fillStyle = farbe(ROT,GRUEN,BLAU);
malkontext.beginPath();
malkontext.arc(x,y,durchmesser,0,2.0*Math.PI,true);
malkontext.fill();
}
}
</script>
</head>
<body>
<input style="width:200px" type="button" id="snap" value="malen" onclick="javascript:malen()"/>
<br/>
<canvas id="grafik" width="500" height="200"></canvas>
</body>
</html>
Code 0-1: Quelltext zu obigem Beispiel.