圣科捕鱼机

書名： HTML5 Graphing and Data Visualization Cookbook
作者名： Ben Fhala
本章字數： 592字
更新時間： 2021-08-05 18:45:53

Drawing curves with a control point

If the world was just two points with a perfect arc this would be the end of the book, but alas or lucky for us, there are still many more complex shapes to learn and explore. There are many curves that are not perfectly aligned curves. Till now all the curves that we created were part of a perfect circle, but not any more. In this recipe, we will explore quadratic curves. The quadratic curves enable us to create curves that are not circular, by adding a third point—a controller to control the curve. You can easily understand this by looking at the following diagram:

A quadratic curve is a curve that has one control point. Consider the case when creating a line, we draw it between two points (A and B in this illustration). When we want to create a quadratic curve, we use an external gravity controller that defines the direction of the curve while the middle line (the dotted line) defines how far will the curve reach.

Getting ready

As done in previous recipes, we are skipping the HTML part here too—not that it's not needed, it just repeats itself in every recipe and if you need to refresh yourself on how to get the HTML setup, please take a look at the Graphics with 2D Canvas recipe in Chapter 1, Drawing Shapes in Canvas.

How to do it...

In this example, we will create a closed shape that looks like a very basic eye. Let's get started:

We always need to start with extracting our canvas element, setting up our width and height variables, and defining a radian (as we find it useful to have one around):
```
var canvas = document.getElementById("eye");
  var wid = canvas.width;
  var hei = canvas.height;
  var radian = Math.PI/180;
```

Next, fill our canvas with a solid color and after that begin a new shape by triggering the beginPath method:

var context = canvas.getContext("2d");
  context.fillStyle = "#dfdfdf";
  context.fillRect(0,0,wid,hei);
  context.beginPath();

Define the line width and stroke color for our eye shape:

  context.lineWidth = 1;
  context.strokeStyle = "#000000"; // line color        
  context.fillStyle = "#ffffff";

Move our drawing pointer to the left-centered point as we will need to draw a line from left to right in the center of the screen and back (only with a curve):
```
  context.moveTo(0,hei/2);
```
Draw two quadratic curves from our initial point to the other side of the canvas and back to the initial point by using an anchor point, which is in the extreme top followed by the extreme bottom of the canvas area:
```
  context.quadraticCurveTo(wid / 2, 0, wid,hei/2);
  context.quadraticCurveTo(wid / 2, hei, 0,hei/2);
```
Close the path. Fill the shape and use the stroke method on the shape (fill for filling the content and stroke for outlines):
```
  context.closePath();
  context.stroke();
  context.fill();
```

Great job! You have just created your first shape by using the quadraticCurveTo method.

How it works...

Let's look at this method closely:

context.quadraticCurveTo(wid / 2, 0, wid,hei/2);

As we are already at the origin point (point A), we input two other points—the control point and point B.

context.quadraticCurveTo(controlX, controlY, pointB_X, pointB_Y);

In our sample, we create a contained shape—the starting point to create an eye. Play with the controller to see how it affects the direction and size of the curve. The thumb rule is that the closer to the vertical line the less steep the curve will be, and the further away it is from the center point the more curved shape would be to the offset.

官术网_书友最值得收藏!

HTML5 Graphing and Data Visualization Cookbook

Drawing curves with a control point

Getting ready

How to do it...

How it works...