- HTML5 Graphing and Data Visualization Cookbook
- Ben Fhala
- 411字
- 2021-08-05 18:45:52
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.

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.
- 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");
- Fill the rectangle canvas area:
context.fillStyle = "#E30A17"; context.fillRect(0,0,wid,hei);
- 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();
- 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();
- 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! :)
- DB2 V9權(quán)威指南
- Python概率統(tǒng)計(jì)
- Visual Basic程序設(shè)計(jì)與應(yīng)用實(shí)踐教程
- MySQL數(shù)據(jù)庫管理與開發(fā)(慕課版)
- Oracle BAM 11gR1 Handbook
- Mastering Rust
- QGIS By Example
- 自制編程語言
- PhoneGap:Beginner's Guide(Third Edition)
- Unity 5 for Android Essentials
- OpenStack Orchestration
- Go語言精進(jìn)之路:從新手到高手的編程思想、方法和技巧(1)
- Android應(yīng)用案例開發(fā)大全(第二版)
- 愛上micro:bit
- iPhone應(yīng)用開發(fā)從入門到精通