Skip to content

Instantly share code, notes, and snippets.

@tmcw

tmcw/index.html

Created February 1, 2013 20:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tmcw/4693840 to your computer and use it in GitHub Desktop.
Save tmcw/4693840 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel='stylesheet' type='text/css' href='' />
<meta http-equiv='content-type' content='text/html; charset=utf-8' />
</head>
<body>
<canvas id='c' width='600' height='600'></canvas>
<script>
// outside angle = 60
// inside = 180 - 120 = 40
var c = document.getElementById('c');
var ctx = c.getContext('2d');
function draw(x, y, r) {
r = r || 0;
ctx.save();
ctx.transform(Math.cos(r), Math.sin(r), -Math.sin(r), Math.cos(r),
Math.sin(20) * 50 * x, Math.cos(20) * 50 * y);
var d2r = Math.PI / 180;
ctx.moveTo(0,0);
var a = 20 * d2r;
var b = 20 * d2r;
ctx.lineTo(Math.cos(b) * 50, -Math.sin(b) * 50);
ctx.lineTo(Math.cos(b) * 100, 0);
ctx.lineTo(Math.cos(b) * 50, Math.sin(b) * 50);
ctx.lineTo(0, 0);
ctx.strokeStyle = '#000';
ctx.fillStyle = '#eee';
ctx.lineWidth = 1;;
ctx.fill();
ctx.stroke();
// reset transform
ctx.restore();
}
draw(1, 1, 0);
draw(1, 1, 45);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment