Canvas (html5) auf Jimdo-Webseiten
Das HTML-Element <canvas> wird verwendet, um Grafiken mit JavaScript zu zeichnen. Das <canvas> -Element ist nur der Container für die Grafik. Diese wird in einem JavaScript festgelegt.
Canvas bietet diverse Methoden zum Zeichnen von Pfaden, Boxen, Kreisen, Text und Hinzufügen von Bildern.
Anleitung zum Zeichnen von Canvas-Elementen: https://www.w3schools.com/html/html5_canvas.asp
no ContextMenu
Beispiele
Diese Beispiele wurden von der o.g. Referenzseite übernommen und für die parallele Darstellung auf einer Seite angepasst
Draw a Line
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
/* <![CDATA[ */
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
/*]]>*/
</script>
Draw a Circle
<canvas id="myCanvas1" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
/* <![CDATA[ */
var c = document.getElementById("myCanvas1");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
/*]]>*/
</script>
Draw a Text
<canvas id="myCanvas2" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas2");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
</script>
Draw a StrokeText
<canvas id="myCanvas3" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas3");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50);
</script>
