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

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:

Drawing curves with a control point

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:

  1. 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;
  2. 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();
  3. Define the line width and stroke color for our eye shape:
      context.lineWidth = 1;
      context.strokeStyle = "#000000"; // line color        
      context.fillStyle = "#ffffff";
  4. 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);
  5. 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);
  6. 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.

How it works...
主站蜘蛛池模板: 阜阳市| 大化| 瑞昌市| 长顺县| 白玉县| 崇义县| 辽源市| 大兴区| 丽江市| 泗阳县| 叶城县| 当雄县| 蒙自县| 通山县| 邮箱| 柘城县| 竹北市| 阿拉善左旗| 福海县| 秦皇岛市| 南华县| 大竹县| 桃园市| 普格县| 长春市| 神农架林区| 类乌齐县| 淮安市| 新邵县| 双江| 庆安县| 东至县| 浦东新区| 罗山县| 且末县| 宁南县| 利辛县| 靖边县| 白银市| 安图县| 凌源市|