"armsflow_canvas" v.74 (latest)

Description

Testing the HTML 5 <canvas> element with data from ARMSFLOW:

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;
			padding:0;
		}
		body {
			margin:0;
		}
		#canvas {
			background:#fefefe;
		}
	</style>

	<script type="text/javascript" src="http://run.kogbox.com/js/1/explorer_canvas"></script>


	<script type="text/javascript" charset="utf-8">
		var frame = 0, frame_total = 40;
		var canvasWidth = 500;
		var canvasHeight = canvasWidth*0.75; //375
		document.getElementById('canvas').width = canvasWidth;
		document.getElementById('canvas').width = canvasHeight;
	
		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,canvasWidth,45)
				canvas.drawImage(img_logo,4,4,136,36);
		    }
		    img_logo.src = '/temp/logo.png';
		}

		function draw() {
			// Loop
			frame += 1;
			if (frame > frame_total) {
				frame = 0;
			}
			var canvas = document.getElementById('canvas').getContext('2d');
		    	var img_map = new Image();
		    	img_map.onload = function(){
				
				// Clear frame
				canvas.clearRect(0,(canvasWidth*0.9),canvasWidth,(canvasHeight*0.744));
				// Lay base color
				canvas.fillStyle = "#f8f8f8";
				canvas.fillRect(0,(canvasWidth*0.09),canvasWidth,(canvasHeight*0.744));
				canvas.drawImage(img_map,0,canvasWidth*0.12,canvasWidth,(canvasHeight*0.584));
				canvas.fill();

				// Draw transactions:
				
					drawArc("Austria","France",13.34,47.69,1.718,46.71,54.0,frame);
					drawArc("Austria","Italy",13.34,47.69,12.57,42.50,1.0,frame);
					drawArc("Austria","Portugal",13.34,47.69,-7.84,39.56,1.0,frame);
					drawArc("Austria","Slovenia",13.34,47.69,14.95,46.14,2.0,frame);
					drawArc("Canada","South Korea",-96.5,62.35,127.8,36.44,6.0,frame);
					drawArc("Italy","Ireland",12.57,42.50,-8.24,53.41,10.0,frame);
					drawArc("Spain","Chile",-2.98,39.89,-71.3,-35.7,239.0,frame);
				
				// Year bubbles
				for (i=10;i<canvasWidth;i+=10) {
				    canvas.beginPath();
				    canvas.arc(i,(canvasWidth*0.6),Math.random()*10,0,3.14,true);
				    canvas.fillStyle = "#cc3333";
				    canvas.fill();
				}

				// Bottom tray
				canvas.globalAlpha = 1.0
				canvas.fillStyle = "#d0d6dd";
				canvas.fillRect(0,(canvasWidth*0.6),canvasWidth,(canvasWidth*0.15))
				// Progress bar
				canvas.fillStyle = "#cc3333";
				canvas.fillRect((canvasWidth*0.01),(canvasHeight*0.9),(canvasWidth*0.01)+frame*((canvasWidth*0.97)/frame_total),5)
				
		    }
			img_map.src = '/temp/world.png';
		  }

		function drawArc(agent,recipient,start_x,start_y,end_x,end_y,value,frame) {
			
			var vscale = -0.8;
			var percent = frame/frame_total;

			// Adjust lat, lon, stretch
			start_x = ((start_x+162)*canvasWidth/360);
			start_y = ((start_y*vscale+92)*canvasHeight/180);
			end_x = ((end_x+162)*canvasWidth/360);
			end_y = ((end_y*vscale+92)*canvasHeight/180);

			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), arc_h = Math.abs(end_y-start_y), 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(arc_x,arc_y,arc_w,arc_h,startArc,endArc);
			canvas.beginPath();
			canvas.strokeStyle = "#cc3333";
			canvas.lineWidth = Math.log(value+1);

			// must convert arc_w and arc_h to... 
			//canvas.arc(arc_x,arc_y,arc_w,arc_h,startArc,endArc,true);
			canvas.moveTo(start_x,start_y);
			canvas.quadraticCurveTo(end_x,start_y,end_x,end_y);
			//canvas.lineTo(end_x,end_y);
			canvas.stroke();

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

</body>
</html>

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

jeff (author) said: 10 Apr

FYI this is implemented WITHOUT flash, java, or even SVG. Fantastic. No plugins required. Runs on an iPhone too.

wow gold said: 20 Sep

We have been an ebay power seller and paypal confirmed seller of wow gold for years.We also offer cheap wow gold.

Snippet Information

Other versions

"armsflow_canvas" v.74 (latest)

Description

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

Log in