Sammlung

Sammlung/Praktikum/3/ias_p2_b0.1/js/view/viewCanvas.js

@@ -0,0 +1,96 @@
+function deg2Rad(degree){
+	var factor = Math.PI/180;
+	return degree * factor;
+};
+
+function degreeConverter(degree){
+	if(degree > 0){
+		degree--;
+	}
+	else{
+		degree = 1;
+	}
+	return degree;
+};
+
+function color8Tor(requestType, degree){
+	switch(requestType){
+		case 'strokeStyle':
+			if(degree > 180){
+				return 'green';
+			}
+			if(degree <= 181 && degree > 120){
+				return 'yellow';
+			}
+			if(degree <= 121 && degree > 37){
+				return 'orange';
+			}
+			if(degree <= 36){
+				return 'red';
+			}
+		break;
+		case 'shadowColor':
+			if(degree > 180){
+				return 'lightgreen';
+			}
+			if(degree <= 181 && degree > 120){
+				return 'blue';
+			}
+			if(degree <= 121 && degree > 60){
+				return 'orange';
+			}
+			if(degree <= 61){
+				return 'red';
+			}
+		break;
+		case 'fillStyle':
+			if(degree > 180){
+				return 'green';
+			}
+			if(degree <= 181 && degree > 120){
+				return 'yellow';
+			}
+			if(degree <= 121 && degree > 37){
+				return 'orange';
+			}
+			if(degree <= 36){
+				return 'red';
+			}
+		break;
+	}
+};
+
+function renderCanvas(countDown, degree){
+	var canvas = document.getElementById('canvas');
+	var ctx = canvas.getContext('2d');	
+	
+	//ctx.strokeStyle = 'green';
+	ctx.strokeStyle = color8Tor('strokeStyle', degree);
+	ctx.lineWidth = 17;
+	ctx.lineCap = 'round';
+	ctx.shadowBlur = 15;
+	//ctx.shadowColor = 'lightgreen';
+	ctx.shadowColor = color8Tor('shadowColor', degree);
+	
+
+	
+	gradient = ctx.createRadialGradient(150, 150, 5, 150, 150, 100);
+	gradient.addColorStop(0, 'lightblue');
+	gradient.addColorStop(1, 'white');
+	ctx.fillStyle = gradient;
+	
+	
+	ctx.fillRect(0, 0, 300, 300);
+	
+	ctx.beginPath();
+
+	degree = degreeConverter(degree);
+	ctx.arc(150, 150, 100, deg2Rad(270), deg2Rad(degree - 90));
+
+	ctx.stroke();
+	
+	ctx.font = "30px Arial";
+	//ctx.fillStyle = 'green';
+	ctx.fillStyle = color8Tor('fillStyle', degree);
+	ctx.fillText(countDown, 145, 160);
+}