52 lines
2.1 KiB
HTML
52 lines
2.1 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="changeValue()" style="text-align: center;">
|
|
<h1>Smiley</h1>
|
|
|
|
<canvas width="400" height="400" id="canvas" style="border: 1px solid; vertical-align: middle";>
|
|
Fallback falls der Browser keinen Canvas unterstützt.
|
|
</canvas>
|
|
<br>
|
|
<input type="range" max="75" min="-75" value="0" id="slider" style="width: 400px; height: 50px;" oninput="changeValue()" >
|
|
<script>
|
|
let h = 0;
|
|
let canvas = document.getElementById("canvas");
|
|
let slider = document.getElementById("slider");
|
|
let smiley = canvas.getContext('2d');
|
|
|
|
function changeValue(){
|
|
h = parseInt(slider.value);
|
|
//draw head
|
|
smiley.beginPath();
|
|
smiley.arc(200, 200, 190, 0, 2 * Math.PI);
|
|
smiley.fillStyle="yellow";
|
|
smiley.fill();
|
|
smiley.stroke();
|
|
|
|
//draw left eye
|
|
smiley.beginPath();
|
|
smiley.arc(100, 130, 25 + (0.1 * h), 0, 2 * Math.PI);
|
|
smiley.fillStyle="black";
|
|
smiley.fill();
|
|
|
|
//draw right eye
|
|
smiley.beginPath();
|
|
smiley.arc(270, 130, 25 + (0.1 * h), 0, 2 * Math.PI);
|
|
smiley.fillStyle = "black";
|
|
smiley.fill();
|
|
|
|
//draw mouth
|
|
smiley.beginPath();
|
|
//I used 2*k to get a bright smile :)
|
|
smiley.bezierCurveTo(75, 270, 200, 270 + 2 * h, 325, 270);
|
|
smiley.stroke();
|
|
}
|
|
</script>
|
|
</body>
|