Skip to content

Instantly share code, notes, and snippets.

@strycore

strycore/radar.html

Created March 22, 2017 16:38
Show Gist options
  • Save strycore/310d3a245b2371a9fb8a2302ff1c2e03 to your computer and use it in GitHub Desktop.
Save strycore/310d3a245b2371a9fb8a2302ff1c2e03 to your computer and use it in GitHub Desktop.
Download ZIP
Canvas radar
Raw
radar.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Index</title>
<style type="text/css" media="screen">
body {
background-color: #333;
text-align: center;
}
canvas {
margin: 50px auto;
border: 3px solid rgba(0, 100, 0, .5);
}
</style>
<script type="text/javascript" charset="utf-8">
function draw() {
var canvas = document.getElementById('tutorial');
var width = 640;
var height = 640;
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(0, 0, 0)";
ctx.fillRect(0, 0, width, height);
var step = 20;
ctx.strokeStyle = "rgba(0, 200, 0, .3)";
for (x = 0; x < width; x=x+step) {
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, height);
//ctx.closePath;
ctx.stroke();
}
for (y = 0; y < width; y=y+step) {
ctx.beginPath();
ctx.moveTo(0, y);
ctx.lineTo(width, y);
//ctx.closePath;
ctx.stroke();
}
// Draw inner and outer limits, between 640 and 1152 from origin
ctx.fillStyle = "rgba(0, 200, 0, 0.15)";
ctx.beginPath();
ctx.moveTo(480,320);
ctx.arc(320,320,160,0,Math.PI*2,true);
//ctx.stroke();
ctx.moveTo(608,320);
ctx.arc(320,320,288,0,Math.PI*2,false);
ctx.fill();
} else {
alert("canvas not supported");
}
}
</script>
</head>
<body onload="draw();">
<canvas id="tutorial" width="640" height="640">
<span>No canvas for you!</span>
</canvas>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment