How Do I Draw An Octagon
2 Answers 2
Your code volition successfully draw a hexagon (I presume you will change the 6 to an 8) as long as cxt is a valid reference to a canvas context.
If it'south not drawing a hexagon, exist certain yous accept a valid reference to a context.
Instance code:
<!doctype html> <html> <caput> <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <fashion> body{ background-color: ivory; } canvas{border:1px solid red;} </way> <script> $(function(){ var canvas=document.getElementById("canvas"); var cxt=canvas.getContext("second"); var numberOfSides = 6; size = 10; Xcenter = 100; Ycenter = 100; cxt.beginPath(); cxt.moveTo (Xcenter + size * Math.cos(0), Ycenter + size * Math.sin(0)); for (var i = ane; i <= numberOfSides; i += 1) { cxt.lineTo (Xcenter + size * Math.cos(i * 2 * Math.PI / numberOfSides), Ycenter + size * Math.sin(i * 2 * Math.PI / numberOfSides)); } cxt.strokeStyle = "#000000"; cxt.lineWidth = 1; cxt.stroke(); }); // end $(function(){}); </script> </head> <body> <sheet id="canvas" width=300 top=300></canvas> </body> </html> answered Apr 7, 2022 at 2:05
markEmarkE
98.1k 11 gold badges 146 silver badges 165 bronze badges
one
<!DOCTYPE html> <html> <torso> <sheet id="canvass"></canvass> <script> var sheet = certificate.getElementById("canvass"); var ctx = canvass.getContext("2d"); ctx.strokeStyle = "#000000"; ctx.lineWidth = ane; office drawMe() { var numberOfSides = eight, size = 10, Xcenter = 100, Ycenter = 100; ctx.beginPath(); ctx.moveTo (Xcenter + size * Math.cos(0), Ycenter + size * Math.sin(0)); for (var i = ane; i <= numberOfSides; i += 1) { ctx.lineTo (Xcenter + size * Math.cos(i * 2 * Math.PI / numberOfSides), Ycenter + size * Math.sin(i * 2 * Math.PI / numberOfSides)); } ctx.stroke(); } drawMe(); </script> </body> </html> answered Oct two, 2022 at 21:13
Not the reply you're looking for? Browse other questions tagged javascript function canvas or ask your own question.
Source: https://stackoverflow.com/questions/22902427/javascript-canvas-drawing-an-octagon
Posted by: branhamfars1969.blogspot.com
Chuckle, quite right...the OP'due south code has leaked globals! Myself, I e'er semi-colon all initialized variables and comma separate all declared merely uninitialized vars.
Apr 7, 2022 at three:ten