If you need professional help, send me an e-mail describing your needs and how to best contact you.
Sincerely,
F. Davies
fjdavies@yahoo.com
(360) 352-0242
ICQ 43536012
advertisements
|
Round Corners Canvas 1 Canvas 2 Buttons
Quadriatic and Bezier Curved Lines in HTML5 canvas using JavaScript
So, that brings us to drawing curved lines two more ways aside from perfect arcs of the previous page:
Quadriatic and bezier curves are illustrated next. These curves are sort of straight lines that have been bent by their control points. Almost like the line started out going toward the control point and then zoomed off toward the other end. Quadratic curves have one control point effecting this, and Bezier curves have two control points. To make this clear, we include a green dot (tiny rectangle) for the control points and pink ones for the actual line ends. A light gray line is also included to indicate that imaginary line from the actual line ends to the control points. The curve itself is drawn black and the other lines and control points etc. need not ordinarily be included in your work.
Quadratic curves
The code quadraticCurveTo is followed by four variables: The first two are the X and Y position of the control point. This is followed by the X and Y of the end point (remember, this number is the distance not the actual end.)
Here is the code used for the above example, including the additional points and lines:
thing001.beginPath();
thing001.moveTo(250,50);
thing001.lineTo(25,25);
thing001.lineTo(50,250);
thing001.strokeStyle = "rgb(127,127,127)";
thing001.stroke();
thing001.beginPath();
thing001.moveTo(250,50);
thing001.quadraticCurveTo(25,25,50,250);
thing001.strokeStyle = "rgb(0,0,0)";
thing001.stroke();
thing001.fillStyle = "rgb(0,255,0)";
thing001.fillRect (24, 24, 2, 2);
thing001.fillStyle = "rgb(255,127,127)";
thing001.fillRect (249, 49, 2, 2);
thing001.fillStyle = "rgb(255,127,127)";
thing001.fillRect (49, 249, 2, 2);
Bezier curves
The Bezier curve has two control points and so the variable in quadraticCurveTo are for the X and Y of the first control point followed by the second contol point (X and Y) and the end point (X and Y.)
Here is the code used for the above example, including the additional points and lines:
thing001.beginPath();
thing001.moveTo(25,25);
thing001.lineTo(175,25);
thing001.strokeStyle = "rgb(127,127,127)";
thing001.stroke();
thing001.beginPath();
thing001.moveTo(250,250);
thing001.lineTo(125,225);
thing001.strokeStyle = "rgb(127,127,127)";
thing001.stroke();
thing001.beginPath();
thing001.moveTo(25,25);
thing001.bezierCurveTo(175,25,125,225,250,250);
thing001.strokeStyle = "rgb(0,0,0)";
thing001.stroke();
thing001.fillStyle = "rgb(0,255,0)";
thing001.fillRect (174, 24, 2, 2);
thing001.fillStyle = "rgb(0,255,0)";
thing001.fillRect (124, 224, 2, 2);
thing001.fillStyle = "rgb(255,127,127)";
thing001.fillRect (24, 24, 2, 2);
thing001.fillStyle = "rgb(255,127,127)";
thing001.fillRect (249, 249, 2, 2);
Click here for the next tutorial on buttons.
|
