-
-
Save wulrahman/5ecb447ea4df2e33a9fa6c855f79c195 to your computer and use it in GitHub Desktop.
HTML5 Canvas Line Graph
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset=utf-8 /> | |
<title>Roulette</title> | |
<!--[if IE]> | |
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> | |
<![endif]--> | |
<style> | |
article, aside, figure, footer, header, hgroup, | |
menu, nav, section { display: block; } | |
</style> | |
</head> | |
<body> | |
<canvas id="c" width="500" height="375"></canvas> | |
<script src="graph.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
if (document.getElementById('c')) { | |
// context | |
let c_canvas = document.getElementById("c"); | |
let context = c_canvas.getContext("2d"); | |
// grid | |
let draw_grid = (o) => { | |
// create a 2 context object | |
let grid = o.canvas.getContext("2d"); | |
// set line width | |
grid.lineWidth = o.style.linewidth; | |
grid.beginPath(); | |
// draw horizontal grid y-plane bottom | |
for (var y = o.style.linewidth/2; y < o.height; y += o.spacing.y) { | |
// update current working coordinations and create new line object | |
// plot top right top_right | |
grid.moveTo(o.offset.x, -y + o.offset.y); | |
grid.lineTo(o.offset.x + o.width, -y + o.offset.y); | |
// plot to left | |
grid.moveTo(o.offset.x, -y + o.offset.y); | |
grid.lineTo(-(o.offset.x + o.width), -y + o.offset.y); | |
// plot bottom left | |
grid.moveTo(o.offset.x, y + o.offset.y); | |
grid.lineTo(-(o.offset.x + o.width), y + o.offset.y); | |
//plot bottom right | |
grid.moveTo(o.offset.x, y + o.offset.y); | |
grid.lineTo(o.offset.x + o.width, y + o.offset.y); | |
} | |
// draw vertical grid on the x-plane bottom | |
for (var x = o.style.linewidth/2; x < o.width; x += o.spacing.x) { | |
// update current working coordinations and create new line object | |
// plot top right top_right | |
grid.moveTo(x + o.offset.x, o.offset.y); | |
grid.lineTo(x + o.offset.x, -o.height + o.offset.y); | |
// plot to left | |
grid.moveTo(-x + o.offset.x, o.offset.y); | |
grid.lineTo(-x + o.offset.x, -o.height + o.offset.y); | |
// plot bottom left | |
grid.moveTo(-x + o.offset.x, o.offset.y); | |
grid.lineTo(-x + o.offset.x, o.height + o.offset.y); | |
// plot bottom right | |
grid.moveTo(x + o.offset.x, o.offset.y); | |
grid.lineTo(x + o.offset.x, o.height + o.offset.y); | |
} | |
// set grid style | |
grid.strokeStyle = o.style.linecolor; | |
// draw grid | |
grid.stroke(); | |
} | |
// axis | |
let draw_axis = (o) => { | |
// create a 2 context object | |
let axis = o.canvas.getContext("2d"); | |
axis.beginPath(); | |
// set line width | |
axis.lineWidth = o.style.linewidth; | |
// update current working coordinations and create new line object | |
axis.moveTo(0, o.intersect.y); | |
axis.lineTo(o.canvas.offsetWidth, o.intersect.y); | |
axis.moveTo(o.intersect.x, 0); | |
axis.lineTo(o.intersect.x, o.canvas.offsetHeight); | |
// set axis style | |
axis.strokeStyle = o.style.linecolor; | |
// draw axis | |
axis.stroke(); | |
} | |
grid_setting = { | |
offset:{ | |
x:60, | |
y:(c_canvas.offsetHeight/2), | |
}, | |
height:c_canvas.offsetWidth, | |
width:c_canvas.offsetWidth, | |
spacing:{ | |
x:10, | |
y:10, | |
}, | |
style:{ | |
linecolor:"#eee", | |
linewidth:1 | |
}, | |
canvas:c_canvas, | |
}; | |
draw_grid(grid_setting); | |
draw_axis({ | |
intersect:{ | |
x:grid_setting.offset.x, | |
y:grid_setting.offset.y | |
}, | |
canvas:c_canvas, | |
style:{ | |
linecolor:"#000", | |
linewidth:2 | |
}, | |
}); | |
// text | |
context.font = "bold 12px sans-serif"; | |
context.fillStyle = "gray"; | |
context.fillText("plays", 248, 42); | |
context.fillText("winnings", 28, 42); | |
// graphing functons | |
let rouletteRed = (function() { | |
var winnings = 0; | |
return function() { | |
winnings += Math.random() < 17/36 ? 1 : -1; | |
return winnings; | |
}; | |
})(); | |
let rouletteBlue = (function() { | |
var winnings = 0; | |
return function() { | |
winnings += Math.random() < 1/36 ? 35 : -1; | |
return winnings; | |
}; | |
})(); | |
let lineGraph = function(o) { | |
// create a 2 context object | |
let line = o.canvas.getContext("2d"); | |
// set line width | |
line.lineWidth = o.style.linewidth; | |
line.beginPath(); | |
line.moveTo(o.offset.x, o.offset.y); | |
// generate plot to fill canvas width - x offset | |
for(var i = (o.offset.x)+1; i < o.canvas.offsetWidth; i++) { | |
line.lineTo(i, -o.data() + o.offset.y); | |
} | |
// set line style | |
line.strokeStyle = o.style.linecolor; | |
// draw line | |
line.stroke(); | |
}; | |
lineGraph({ | |
data: rouletteRed, | |
offset:{ | |
x:grid_setting.offset.x, | |
y:grid_setting.offset.y | |
}, | |
style: { | |
linecolor:'#e00', | |
linewidth:1 | |
}, | |
canvas:c_canvas, | |
}); | |
lineGraph({ | |
data: rouletteBlue, | |
offset:{ | |
x:grid_setting.offset.x, | |
y:grid_setting.offset.y | |
}, | |
style: { | |
linecolor:'#00e', | |
linewidth:1 | |
}, | |
canvas:c_canvas, | |
}); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment