All geek questions in one place

How to draw a star using HTML5 canvas?

I am trying to draw a star using canvas, but the code is not working. I want to understand: what are the steps for measuring the coordinates of Y and X? How to find them? draw any shape?

<html> <head> <meta charset = "utf-8"> <title>Drawing Lines</title> </head> <body> <canvas id = "drawLines" width = "400" height = "200" style = "border: 1px solid Black;"> </canvas> <script> var canvas = document.getElementById("drawLines"); var context = canvas.getContext("2d") canvas.beginPath(); canvas.moveTo(50,50); canvas.lineTo(120,150); canvas.lineTo(0,180); canvas.lineTo(120,210); canvas.lineTo(50,310); canvas.lineTo(160,250); canvas.lineTo(190,370); canvas.lineTo(220,250); canvas.lineTo(330,310); canvas.lineTo(260,210); canvas.lineTo(380,180); canvas.closePath(); canvas.stroke(); </script> </body> </html>
+5
source share
5 answers

A star is basically a regular polygon with variable points on the inner and outer radii.

Here is an example of a flexible function for drawing a star shape.

You can set the position, #spikes and the inner and outer radius of the spikes:

enter image description here

Sample code and demo: http://jsfiddle.net/m1erickson/8j6kdf4o/

 <!doctype html> <html> <head> <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> <style> body{ background-color: ivory; } canvas{border:1px solid red;} </style> <script> $(function(){ var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); function drawStar(cx,cy,spikes,outerRadius,innerRadius){ var rot=Math.PI/2*3; var x=cx; var y=cy; var step=Math.PI/spikes; ctx.beginPath(); ctx.moveTo(cx,cy-outerRadius) for(i=0;i<spikes;i++){ x=cx+Math.cos(rot)*outerRadius; y=cy+Math.sin(rot)*outerRadius; ctx.lineTo(x,y) rot+=step x=cx+Math.cos(rot)*innerRadius; y=cy+Math.sin(rot)*innerRadius; ctx.lineTo(x,y) rot+=step } ctx.lineTo(cx,cy-outerRadius); ctx.closePath(); ctx.lineWidth=5; ctx.strokeStyle='blue'; ctx.stroke(); ctx.fillStyle='skyblue'; ctx.fill(); } drawStar(100,100,5,30,15); }); // end $(function(){}); </script> </head> <body> <canvas id="canvas" width=300 height=300></canvas> </body> </html>
+21
source

These functions, lineTo (), moveTo (), stroke (), etc. refer to the context object, not to the canvas object. Are you checking the developer console (f12 in Chrome)? You will see that these functions are undefined.

+2
source

The function may be shorter with coordinate conversion:

 function strokeStar(x, y, r, n, inset) { ctx.save(); ctx.beginPath(); ctx.translate(x, y); ctx.moveTo(0,0-r); for (var i = 0; i < n; i++) { ctx.rotate(Math.PI / n); ctx.lineTo(0, 0 - (r*inset)); ctx.rotate(Math.PI / n); ctx.lineTo(0, 0 - r); } ctx.closePath(); ctx.fill(); ctx.restore(); }
+1
source

As @ v-rubinetti mentioned, you are trying to call methods incorrectly.

While it is easy to draw a simple star in a canvas by coding, this makes it difficult to draw advanced things. You can use open source vector graphics software like Inkscape , as well as ink2canvas to draw advanced vector graphics and save them in an html5 document.

For example, here is a 25-red star drawn in Inkscape and saved using the ink2canvas extension:

 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Inkscape Output</title> </head> <body> <canvas id='canvas' width='320' height='320'></canvas> <script> var ctx = document.getElementById("canvas").getContext("2d"); ctx.save(); ctx.lineJoin = 'miter'; ctx.strokeStyle = 'rgb(0, 0, 0)'; ctx.lineCap = 'butt'; ctx.lineWidth = 1.000000; ctx.fillStyle = 'rgb(255, 255, 0)'; ctx.beginPath(); ctx.transform(0.506236, 0.000000, 0.000000, 0.505711, 82.274469, 51.410524); ctx.moveTo(342.857130, 449.505040); ctx.lineTo(234.764940, 344.516400); ctx.lineTo(279.468630, 488.419550); ctx.lineTo(200.881970, 359.847880); ctx.lineTo(208.393950, 510.347410); ctx.lineTo(164.250710, 366.271350); ctx.lineTo(134.098980, 513.910810); ctx.lineTo(127.172840, 363.383190); ctx.lineTo(61.251941, 498.885850); ctx.lineTo(91.978093, 351.364870); ctx.lineTo(-5.569921, 466.216610); ctx.lineTo(60.877887, 330.971560); ctx.lineTo(-62.167941, 417.955810); ctx.lineTo(35.826363, 303.484630); ctx.lineTo(-104.985860, 357.135850); ctx.lineTo(18.397601, 270.631190); ctx.lineTo(-131.333260, 287.578290); ctx.lineTo(9.686712, 234.475540); ctx.lineTo(-139.554650, 213.653670); ctx.lineTo(10.241036, 197.289490); ctx.lineTo(-129.133450, 140.006950); ctx.lineTo(20.025741, 161.409550); ctx.lineTo(-100.724450, 71.265628); ctx.lineTo(38.426018, 129.090210); ctx.lineTo(-56.112700, 11.748970); ctx.lineTo(64.285711, 102.362200); ctx.lineTo(1.898679, -34.803371); ctx.lineTo(95.979959, 82.904945); ctx.lineTo(69.664621, -65.466342); ctx.lineTo(131.517300, 71.941014); ctx.lineTo(142.927140, -78.313274); ctx.lineTo(168.664780, 70.159311); ctx.lineTo(217.082890, -72.536949); ctx.lineTo(205.088300, 77.671789); ctx.lineTo(287.472380, -48.500313); ctx.lineTo(238.499240, 94.006409); ctx.lineTo(349.672790, -7.713676); ctx.lineTo(266.798250, 118.136810); ctx.lineTo(399.775840, 47.260185); ctx.lineTo(288.207210, 148.546780); ctx.lineTo(434.633360, 112.967060); ctx.lineTo(301.380910, 183.325570); ctx.lineTo(452.055130, 185.278350); ctx.lineTo(305.491610, 220.287880); ctx.lineTo(450.946490, 259.650470); ctx.lineTo(300.281000, 257.111240); ctx.lineTo(431.377070, 331.410340); ctx.lineTo(286.076510, 291.481900); ctx.lineTo(394.576520, 396.049020); ctx.lineTo(263.770630, 321.240230); ctx.closePath(); ctx.fill(); ctx.stroke(); ctx.restore(); </script> </body> </html>
0
source 
 //function to draw star with N spikes //centered on a circle of radius R, centered on (cX,cY) function star(R, cX, cY, N) { //star draw ctx.beginPath(); ctx.moveTo(cX + R,cY); for(var i = 1; i <= N * 2; i++) { if(i % 2 == 0){ var theta = i * (Math.PI * 2) / (N * 2); var x = cX + (R * Math.cos(theta)); var y = cY + (R * Math.sin(theta)); } else { var theta = i * (Math.PI * 2) / (N * 2); var x = cX + ((R/2) * Math.cos(theta)); var y = cY + ((R/2) * Math.sin(theta)); } ctx.lineTo(x ,y); } ctx.closePath(); ctx.stroke(); }
0
source

Source: https://habr.com/ru/post/1202553/

More articles:


All Articles