96 lines
1.9 KiB
JavaScript
96 lines
1.9 KiB
JavaScript
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);
|
|
} |