Publish project v0.1

alimd · Mar 4, 2013 · 99f6b0c · 99f6b0c
commit 99f6b0c
Show file tree

Hide file tree

Showing 3 changed files with 1,456 additions and 0 deletions.
diff --git a/CanvasLoader.js b/CanvasLoader.js
@@ -0,0 +1,79 @@
+// a callibrate func for change range of numbers
+Math.getInRange=function (x, arr) {// arr = [x1,x2,y1,y2] // x is input and new y return
+  return ((arr[3] - arr[2]) * (x - arr[0])) / (arr[1] - arr[0]) + arr[2];
+}
+
+$(function(){
+	var canvas = $('#loading')[0],
+		ctx = canvas.getContext("2d"),
+		d2r = Math.PI/180,
+		degshif = 90,
+		currentDegree = 0,
+		aniDue = 4000,
+		lastDraw = 0,
+		iv=0,
+		saresh = 6*d2r,
+		starArc = -1*degshif*d2r;
+
+	var drawCircle = function (deg){
+		ctx.clearRect(0,0,40,40);
+
+		deg-=degshif;
+		deg*=d2r;
+
+		// sahdow
+		ctx.lineWidth=7;
+		ctx.globalAlpha=0.2;
+		ctx.strokeStyle='hsl(60,20%,20%)';
+		ctx.beginPath();
+		ctx.arc(20,20,15,0,360*d2r);
+		ctx.stroke();
+
+		if(!deg) return;
+
+		// body
+		ctx.lineWidth=5;
+		ctx.globalAlpha=0.8;
+		//ctx.strokeStyle='hsl(60,10%,20%)';
+		ctx.beginPath();
+		ctx.arc(20,20,15,starArc,deg-saresh);
+		ctx.stroke();
+
+		// saresh
+		ctx.beginPath();
+		ctx.strokeStyle='hsl(60,5%,70%)';
+		ctx.arc(20,20,15,deg-saresh,deg);
+		ctx.stroke();
+
+		//ctx.closePath();
+
+	},
+
+	circleAni = function(){
+		var now = Date.now();
+		currentDegree += Math.getInRange(now-lastDraw,[0,aniDue,0,360]);
+		if(currentDegree>359){
+			currentDegree%=360;
+			console.log('nextSlide');
+		}
+
+		drawCircle(currentDegree);
+		lastDraw = now;
+	},
+
+	startInt = function(){
+		if(iv) return;
+		lastDraw = Date.now();
+		iv = setInterval(circleAni,1000/60);
+	},
+
+	stopInt = function(){
+		clearInterval(iv);
+		iv=0;
+	}
+
+	$('#draw').click(circleAni);
+	$('#start').click(startInt);
+	$('#stop').click(stopInt);
+	startInt();
+});
diff --git a/test.html b/test.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
+	<title>Document</title>
+	<script type="text/javascript" src="zepto.js"></script>
+	<script type="text/javascript" src="CanvasLoader.js"></script>
+	<style type="text/css">
+		body{
+			background-color: hsl(227, 12%, 71%);
+		}
+	</style>
+</head>
+<body>
+	<canvas id="loading" width="40" height="40" ></canvas>
+	<br />
+	<a href="#" id="draw">Draw</a>
+	<a href="#" id="start">Start</a>
+	<a href="#" id="stop">Stop</a>
+</body>
+</html>