Skip to content

Instantly share code, notes, and snippets.

@aya-eiya

aya-eiya/regularHexagon.html

Created May 1, 2012 10:01
Show Gist options
  • Save aya-eiya/2566959 to your computer and use it in GitHub Desktop.
Save aya-eiya/2566959 to your computer and use it in GitHub Desktop.
Download ZIP
正多角形をCanvasに描画する
Raw
regularHexagon.html
<html>
<script>
(function(glb,loc){
loc.onLoad = function(){
var cnv = loc.myCanvas = glb.document.getElementById('myCanvas');
var context = cnv.getContext("2d");
context.fillStyle = "#3411FF";
context.strokeStyle = "red";
context.moveTo(230.0,130.0);context.lineTo(230.0,130.0);context.lineTo(180.0,216.60254037844385);context.lineTo(80.00000000000003,216.60254037844388);context.lineTo(30.0,130.0);context.lineTo(79.99999999999996,43.39745962155615);context.lineTo(179.99999999999994,43.397459621556095);context.lineTo(230.0,129.99999999999997);
context.stroke();
}
})(this,_local={});
</script>
<body onload="_local.onLoad()">
<canvas id="myCanvas" width="360" height="360" style="border:1px black solid">
</body>
Raw
regularPolygonCanvas.groovy
def vertexs = 6
def unitD = 360.0f / vertexs
def x=0.0f,y=0.0f,xp=0.0f,yp=0.0f
def lineDraw = ""
(vertexs+1).times{
x = Math.cos(Math.PI / 180 * unitD * it) - 0.5f
y = Math.sin(Math.PI / 180 * unitD * it) - 0.5f
xp = 180 + x * 100
yp = 180 + y * 100
if(!lineDraw) lineDraw = "context.moveTo($xp,$yp);"
lineDraw += "context.lineTo($xp,$yp);"
}
println """
<html>
<script>
(function(glb,loc){
loc.onLoad = function(){
var cnv = loc.myCanvas = glb.document.getElementById('myCanvas');
var context = cnv.getContext("2d");
context.fillStyle = "#3411FF";
context.strokeStyle = "red";
$lineDraw
context.stroke();
}
})(this,_local={});
</script>
<body onload="_local.onLoad()">
<canvas id="myCanvas" width="360" height="360" style="border:1px black solid">
</body>
"""
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment