Ancient Temple City

How to draw smooth curve through N points using javascript HTML5 canvas?

Here is the code for drawing curve from N points:


// move to the first point
ctx.moveTo(points[0].x, points[0].y);

for (i = 1; i < points.length - 2; i ++)
{
var xc = (points[i].x + points[i + 1].x) / 2;
var yc = (points[i].y + points[i + 1].y) / 2;
ctx.quadraticCurveTo(points[i].x, points[i].y, xc, yc);
}

// curve through the last two points
ctx.quadraticCurveTo(points[i].x, points[i].y, points[i+1].x,points[i+1].y);
Labels:
Reactions:

Post a Comment

[blogger]

MKRdezign

{facebook#http://www.facebook.com/GTVCreations} {twitter#http://www.twitter.com/GTVCreations} {google-plus#http://www.google.com} {pinterest#http://www.pinterest.com} {youtube#http://www.youtube.com} {instagram#http://www.instagram.com}

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget