45 lines
1.6 KiB
HTML
45 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link href=".css" rel="stylesheet">
|
|
<title>Smiley</title>
|
|
</head>
|
|
<body onload="werte()" style="text-align: center;">
|
|
<h1>Smiley</h1>
|
|
|
|
<canvas width="400" height="400" id="smileycanvas" style="border: 1px solid; vertical-align: middle;">Dieser Text wird angezeigt, falls der Browser kein Canvas unterstützt.</canvas><br>
|
|
<input type="range" max="75" min="-75" value="0" id="slider" style="width: 400px; height: 50px;" oninput="changesmiley()">
|
|
<p id="ausgabe"></p>
|
|
<script>
|
|
let sliderval = 0;
|
|
let canvas = document.getElementById("smileycanvas");
|
|
let smiley = canvas.getContext('2d');
|
|
|
|
function changesmiley() {
|
|
sliderval = parseInt(document.getElementById("slider").value);
|
|
smiley.arc(200, 200, 190, 0, 2 * Math.PI);
|
|
smiley.fillStyle="yellow";
|
|
smiley.fill();
|
|
smiley.stroke();
|
|
|
|
|
|
smiley.beginPath();
|
|
smiley.arc(100, 130, 25 + (0.1*sliderval), 0, 2*Math.PI);
|
|
smiley.fillStyle="black";
|
|
smiley.fill();
|
|
smiley.beginPath();
|
|
smiley.arc(270, 130, 25 + (0.1*sliderval), 0, 2*Math.PI);
|
|
smiley.fillStyle = "black";
|
|
smiley.fill();
|
|
|
|
smiley.beginPath();
|
|
smiley.bezierCurveTo(75, 270, 200, 270 + sliderval, 325, 270);
|
|
smiley.stroke();
|
|
|
|
|
|
}
|
|
</script>
|
|
</body>
|