How to draw a starry sky with Canvas, moon, earth, add text

Xiaobian to share with Canvas to draw starry sky, moon, earth, add text, I hope everyone will be harvested after reading this article, let us discuss together!

First, the final renderings:

Final achievement

如何用canvas绘制星空,月亮,大地,添加文字

We are divided into four parts to draw this effect.
1. The starry sky renderings are as follows:

如何用canvas绘制星空,月亮,大地,添加文字

We analyze this starry sky, first stars are distributed in two-thirds and above , The stars are different, the rotation angle is different, in the middle of the page, there is a scattered blue sky effect.

Ok, let’s try to draw a starry in accordance with the attention of the attention.
However, this is the most important thing, just learn to draw a five-pointed star.
Use the primary high school mathematical knowledge to calculate the coordinates of each of the Pentagrans, the specific function is as follows, which is the five-pool of the square.
The following is a simple figure, interested in drawing its own draw value.

According to the calculation, we have given 10 vertex values, and draw a positive pentagon star. The code is as follows: 如何用canvas绘制星空,月亮,大地,添加文字

Function setPath (cxt) {cxt.beginpath (); for (var i = 0; i
  After drawing a five-pointer, we should think about this five-pointer Rotation and magnification change, rotate using Canvas's Rotate method, using Scale to change change, the specific code is as follows: < 5; i++) {
        cxt.lineTo(            Math.cos((18 + i * 72 ) / 180 * Math.PI) * 10 ,
            -Math.sin((18 + i * 72 ) / 180 * Math.PI) * 10
        );
        cxt.lineTo(            Math.cos((54 + i * 72) / 180 * Math.PI) * 5 ,
            -Math.sin((54 + i * 72 ) / 180 * Math.PI) * 5
        );
    }
    cxt.closePath();
} 

Function DrawStar (CXT, R, X, Y , Rot) {cxt.save (); cxt.translate (x, y); cxt.Rotate (ROT / 180 * Math.pi); cxt.scale (r, r);SetPath (cxt) cxt.fillstyle = “# fb3”; cxt.fill (); cxt.restore ();}

  To this, we can reuse the method, borrow random Value, draw a starry sky:  
for (var i = 0; i

, let us airize this star air conditioner Color.
 VAR lineargard = context.createradialGradient (canvas.width / 2, canvas.height, 0, canvas.width / 2, canvas.height; lineargard .addcolorstop (1.0, "black"); lineargard.addcolorstop (0.0, "# 148efb"); context.FillStyle = lineargard; context.FillRect (0, 0, canvas.width, canvas.Height);  < 400; i++) {        
            var r = Math.random();
            var x = Math.random() * canvas.width;           
            var y = Math.random() * canvas.height*0.6;        
            var rot = Math.random() * 360;
        drawStar(context, r, x, y, rot);
    } 
At this point, we have finished painting.

2. One round of bending

On the basis of a starry sky above, we increase a round of bending month, the renderings are as follows :
   Melome, that is, two arcs, we can calculate the TAN values ​​of the TAN values ​​in the middle of the next figure. 
The final code is as follows, ROT is a rotation angle, FillColor fill color.



Function Fillmoon (CXT, X1, Y1, X2, Y2, R, / * Option * / Rot, / * Option * / fillcolor) {cxt.save (); cxt.beginpath (); cxt.Rotate (ROT / 180 * Math.pi); // Create a start point CXT.ARC (x1, y1, r, 0.5 * Math. Pi, 1.5 * math.pi, true); cxt.moveto (x1, y1-r); cxt.ARCTO (X2, Y2, X1, Y1 + R, DIS (R, X2-X1)); // Creating an arc CXT.FILLSTYLE = FillColor || “# fb3”; cxt.restore (); cxt.restore ();}

如何用canvas绘制星空,月亮,大地,添加文字

3. Land 如何用canvas绘制星空,月亮,大地,添加文字

on the above We have added a large land, the renderings are as follows:

The most important thing to draw the land is to draw the drawing of the BezierCurveto method, and the parameters within Beziercurveto are calculated. Resulting. LandStyle is coloring for this graphic. The code is as follows:
  Function drawland (cxt) {cxt.save (); cxt.beginpath (); cxt.moveto (0,600); cxt.beziercurveto (540, 400, 660, 800, 1430 , 600); cxt.lineto (1430, 800); cxt.Lineto (0,800); cxt.closepath (); var landstyle = cxt.createlineargradient (0,800,0,0); landstyle.addcolorstop (0, "# 030" LandStyle.AddColorstop (1, "# 580"); cxt.FillStyle = landStyle; cxt.Fill (); cxt.restore (); cxt.restore ();}  

4. Text

In the last step, it is the simplest step.

Set the size, color of the text, and use the FillText to draw text.

如何用canvas绘制星空,月亮,大地,添加文字 cxt.save (); cxt.font = “bold 20px georgia”; cxt.FillStyle = “# fff”; cxt.FillText (“Canvas text drawn”, 200, 650); CXT.FillText (“- Sea Month _ Heaven”, 500, 700); cxt.restore ();} “ `


After reading this article, I believe that you use Canvas draws the starry sky, the moon, earth, and adding text has a certain understanding. I want to know more related knowledge. Welcome to Tumi Yun Industry Information Channel, thank you for reading!
                    
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment