Beispiel:JS-canvas-pfad1.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
<title>Pfade mit canvas</title>
<style>
canvas {background:white; border:1px solid #333;}
</style>
<script>
'use strict';
(function () {
function zeichne() {
var element = document.getElementById('canvas');
if(element.getContext) {
var context = element.getContext('2d');
context.clearRect(0, 0, element.width, element.height);
context.beginPath();
context.moveTo(20, 80);
context.lineTo(40, 50);
context.lineTo(20, 20);
context.arc(90, 50, 30, Math.PI * 7 / 6, Math.PI * 5 / 6);
context.closePath();
context.strokeStyle = 'steelBlue';
context.lineWidth = 5;
context.lineJoin = 'round';
context.stroke();
}
}
document.addEventListener(
"DOMContentLoaded",
function () { zeichne(); }
);
}());
</script>
</head>
<body>
<h1>Beispiel: Pfad mit canvas</h1>
<main>
<canvas id="canvas" width="300" height="150">Beispiel für einen Pfad mit Canvas, der die Form eines Fischs zeichnet.</canvas>
</main>
</body>
</html>
