"armsflow_canvas" v.40 (see latest version)

Description

Testing the HTML 5
Run | View code [+] | Create a snippet based on this »
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>ARMSFLOW</title>
	<meta name="author" content="Jeffrey Warren">
	<!-- Date: 2008-03-31 -->
	
	<style type="text/css" media="screen">
		html {
			background:#eee;
		}
		#canvas {
			background:#fefefe;
		}
	</style>
	
	<script type="text/javascript" charset="utf-8">
		var frame = 0, frame_total = 100;
	
		function setup() {
			var canvas = document.getElementById('canvas').getContext('2d');
			
		    var img_logo = new Image();
		    img_logo.onload = function(){
			    canvas.fillStyle = "#d0d6dd";
				canvas.fillRect(0,0,500,45)
				canvas.drawImage(img_logo,4,4,136,36);
		    }
		    img_logo.src = '/temp/logo.png';
		}

		function draw() {
			frame += 1;
			if (frame*5 > 490) {
				frame = 0;
			}
			var canvas = document.getElementById('canvas').getContext('2d');
		    	var img_map = new Image();
		    	img_map.onload = function(){
			
				canvas.clearRect(0,60,500,279);
				canvas.drawImage(img_map,0,60,500,219);
				canvas.fill();

				for (i=10;i<500;i+=10) {
					canvas.beginPath();
					// canvas.arc(i,300,Math.random()*10,0,3.14,true);
					drawArc("Argentina","Italy",30,40,50,60,80,frame);
					canvas.fillStyle = "#cc3333";
					canvas.fill();
				}
				
				canvas.globalAlpha = 1.0
				canvas.fillStyle = "#d0d6dd";
				canvas.fillRect(0,300,500,75)
				canvas.fillStyle = "#cc3333";
				canvas.fillRect(20,335,20+frame*5,5)

				
		    }
			img_map.src = '/temp/world.png';
		  }

		function drawArc(agent,recipient,start_x,start_y,end_x,end_y,value,frame) {
			var canvas = document.getElementById('canvas').getContext('2d');
			var PI = 3.1415;
			var arc_x = start_x, arc_y = end_y, arc_w = Math.abs(end_x-start_x)*2, arc_h = Math.abs(end_y-start_y)*2, a_0 = PI/-2, a_3 = 0, a_6 = PI/2, a_9 = PI, a_12 = PI*2-PI/2, a_15 = PI*2;

			// Arc angles
			if (end_x>start_x) { // Going E
				if (end_y>start_y) { // Going SE
					startArc = a_0;
					endArc = a_3;
				} else { // Going NE //CC
					startArc = a_9;
					endArc = a_12;
					arc_x = end_x;
					arc_y = start_y;
				}
			} else { // Going W	
				if (end_y>start_y) { // Going SW //CC
					startArc = a_9;
					endArc = a_12;
				} else { // Going NW
					startArc = a_6;
					endArc = a_9;
				}
			}

			//animate: 
			if (frame <= frame_total) {
				if (end_x>start_x) { // Going E
					if (end_y>start_y) { // Going SE
						endArc = (startArc+(PI/2)*(frame/frame_total));
					} else { // Going NE //CC
						endArc = (startArc+(PI/2)*(frame/frame_total));
					}
				} else { // Going W	
					if (end_y>start_y) { // Going SW //CC
						startArc = (endArc-(PI/2)*(frame/frame_total));
					} else { // Going NW
						endArc = (startArc+(PI/2)*(frame/frame_total));
					}
				}
			}

			//arc(arc_x,arc_y,arc_w,arc_h,startArc,endArc);
			canvas.beginPath();
			canvas.fillStyle = "#cc3333";
			canvas.lineWidth = Math.log(value+1)*20;
			canvas.arc(arc_x,arc_y,arc_w,arc_h,startArc,endArc,false);
			canvas.stroke();

		 }
		
		function hover() {
			// alert("Hover!");
		}
		
		setInterval(draw,100);
	</script>
	
</head>
<body onLoad="setup();">
	
<canvas onMouseOver="hover();" id="canvas" width="500" height="375"></canvas>

</body>
</html>
Snippet Information

Other versions

"armsflow_canvas" v.40 (see latest version)

Description

Comments (0) | View comments for all versions (2)

Log in
