How to draw curves in circle in canvas using for loop?
Question
I want to draw no of bezier curves in circle using for loop. Until now I'm able to put no of bezier curves in circular mode, but these curves are not curved, they are just straight lines because I have not been able to change the handle properly which will make these curves curved. You can see my code here, please let me know my mistakes.
I have also tried to fill color into curves, but that's not also happening and I don't know why.
<html> <body> <style> *{ margin: 0px; } body{ background-color: aqua; } canvas { background-color: white; } </style> <canvas id="mycanvas"></canvas> <script> var canvas = document.getElementById('mycanvas'); var ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; x = window.innerWidth/2; y = window.innerHeight/2; r = window.innerWidth; theta = 0.1; for(theta=0.1; theta<12.6; theta+=0.1) { ctx.beginPath(); ctx.moveTo(x, y); ctx.bezierCurveTo(x,y,x,y, x+ r * Math.cos(theta),y + r * Math.sin(theta)); ctx.lineWidth = 1; ctx.strokeStyle = "black"; ctx.stroke(); ctx.closePath(); ctx.fill(); } for ( i=r/16; i < r; i=i+r/12 ) { ctx.beginPath(); ctx.arc(x, y, i, 0, 2 * Math.PI, false); ctx.stroke(); } </script> </body> </html>
1 answers
solution1
0 ACCPTED 2020-02-26 04:05:51
If you need a single curve to be repeated, then the simplest is to define it only once and instead of calculating yourself all the new points, just make your canvas move.
Think of your canvas as a moveable sheet of paper. You can use ctx.setTransform , ctx.rotate , ctx.translate etc. to "move" this canvas, while keeping your pen at the same position.
This way, you can define once your path, and draw it multiple times, at different positions:
var canvas = document.getElementById('mycanvas'); var ctx = canvas.getContext('2d'); const angle = 0.1; // by which amount we rotate at each iteration function draw() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; const cx = window.innerWidth/2; const cy = window.innerHeight/2; const rad = Math.max(cx, cy) * 2; // controls the position of all the control points, // you might want to set each manually instead const binding = rad/Math.PI; let theta = 0; // we move our canvas so its center is now coordinates 0,0 ctx.setTransform(1, 0, 0, 1, cx, cy); // a single path declaration ctx.beginPath(); for( theta; theta < Math.PI*4; theta += angle ) { ctx.rotate(angle); // apply the rotation ctx.moveTo(0, 0); // current center // always the same parameters for the bezier curve ctx.bezierCurveTo(0, -binding, rad, -binding, rad, 0); } // even these can be part of the same single path for ( i=rad/8; i < rad; i += rad/8 ) { ctx.moveTo(i, 0); // to avoid the segment from center ctx.arc(0, 0, i, 0, 2 * Math.PI, false); } // a single stroke of the whole path ctx.stroke(); // to reset the coordinate 0,0 at top left corner ctx.setTransform(1,0,0,1,0,0); } draw(); onresize = draw;
root,body { background: white; margin: 0 } canvas { display: block; }
<canvas id="mycanvas"></canvas>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.