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

Overlapping shapes to create other shapes

There are many flags and many shapes in general that can be created by combining the shapes we created so far. One of the most popular shapes in 82 flags we don't know how to create is the crescent shape like the one in the flag of Turkey. With it we learn a new skill of using subtraction to create more in-depth shapes.

Overlapping shapes to create other shapes

Getting ready

The previous recipe is our starting point in this recipe. From here, we will continue working to create more advanced shapes that are built out of two shapes when combined. As such, we will be using the code created in the last recipe located in 01.02.flags.js.

How to do it...

Let's jump right into our code and see it in action.

  1. Gain access to the context and save the width and height of the canvas into variables:
    var canvas = document.getElementById("turkey");
    var wid = canvas.width;
    var hei = canvas.height;
    
    var context = canvas.getContext("2d");
  2. Fill the rectangle canvas area:
    context.fillStyle = "#E30A17";
    context.fillRect(0,0,wid,hei);
  3. Create a full circle:
    context.fillStyle = "#ffffff";
    context.beginPath();
    context.arc(wid / 2 - 23, hei / 2, 23, 0, 2 * Math.PI, false);
    context.closePath();
    context.fill();
  4. Change the color of canvas fill. Fill a circle within its bound with another circle that hides part of the last circle that was created. This effect creates a shape that looks like a crescent moon:
    context.fillStyle = "#E30A17";
    context.beginPath();
    context.arc(wid / 2 - 18, hei / 2, 19, 0, 2 * Math.PI, false);
    context.closePath();
    context.fill();
  5. Reuse createStart from the previous recipe to add the Turkish star:
    createStar(context,wid/2 + 13,hei/2,5,16,5,"#ffffff",null,15);

There you go! You've just created a shape that is not possible without masking one shape with another.

How it works...

The catch here is we are using two circles, one overlaps the other to create a crescent shape. By the way, notice how we are tilting the star as well so that one of its points will point to the middle of the circle.

We've gone through a lot in the last few examples and at this stage you should be very comfortable creating many shapes and elements in the canvas. There is still much to explore before we can say we have mastered canvas, but we can definitely say we have mastered creating most of the flags of the world and that's very cool. I would love to see your flags. Drop me a line when you create one not in the book! :)

主站蜘蛛池模板: 平泉县| 威远县| 英德市| 六枝特区| 通渭县| 宜都市| 葵青区| 萝北县| 曲周县| 万宁市| 江源县| 正安县| 西安市| 宝山区| 晴隆县| 济宁市| 莎车县| 辛集市| 巩留县| 江阴市| 天峻县| 淮滨县| 合川市| 襄樊市| 车致| 温宿县| 什邡市| 恩平市| 嵊泗县| 安多县| 富平县| 建湖县| 温宿县| 五原县| 偃师市| 信宜市| 广东省| 兴义市| 吉水县| 永福县| 二手房|