structix/intecsync
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Update uebung4

Browse Source
This commit is contained in:
structix
2019-05-26 21:25:41 +02:00
parent 034e806551
commit c236524e62
3 changed files with 156 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
uebung4/smiley.html
View File

@@ -1,46 +1,51 @@
<!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>
<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="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;
function changesmiley() {
sliderval = parseInt(document.getElementById("slider").value);
let canvas = document.getElementById("smileycanvas");
<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');
smiley.arc(200, 200, 190, 0, 2 * Math.PI);
smiley.fillStyle="yellow";
smiley.fill();
smiley.stroke();
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();
smiley.beginPath();
smiley.arc(100, 130, 25 + (0.1*sliderval), 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();
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>
//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>