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

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! :)

主站蜘蛛池模板: 轮台县| 潜江市| 沂源县| 江西省| 抚州市| 华亭县| 桓台县| 堆龙德庆县| 石屏县| 勃利县| 琼海市| 肇州县| 綦江县| 霍州市| 翁源县| 德令哈市| 辽宁省| 福州市| 从江县| 澄城县| 琼中| 杭锦旗| 临安市| 安仁县| 巴中市| 股票| 板桥市| 天镇县| 廊坊市| 花莲县| 长春市| 黄骅市| 贺州市| 古丈县| 株洲县| 三明市| 吴忠市| 灵山县| 正蓝旗| 砚山县| 莱西市|