Snippet Information
Version: 74 (latest)
Author: jeff
Language: html
Licensed under MIT
Other versions
"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.
Log in if you have a Kogbox account.