How to use canvas to draw the starry sky, moon, earth, and add text

This time I will show you how to use canvas to draw the starry sky, moon, and earth, and add text. Use canvas to draw the starry sky, moon, and earth, and add text. What are the precautions ? The following is a practical case, let’s take a look.

First the final rendering:

Final effect

##We divide it into four parts to draw the effect.

1. A starry sky
The starry sky renderings are as follows:

Let’s analyze this starry sky. First of all, the stars are distributed in two-thirds of the page and above. , the stars are of different sizes and rotation angles, with a diffuse blue sky effect in the middle of the page.

Okay, let us try to draw a starry sky according to the analyzed points of attention.
However, the most important point is to learn to draw a five-pointed star.
Use middle and high school mathematics knowledge to calculate the coordinates of each vertex of the five-pointed star. The specific
function is as follows, that is, a square five-pointed star is drawn. The following is a simple diagram. If you are interested, you can draw it yourself and calculate the values ​​of each vertex.

According to the calculation, we obtain 10 vertex values ​​in turn and draw a positive five-pointed star. The code is as follows:

function setPath(cxt){
    cxt.beginPath();    for (var i = 0; i < 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();
}

Draw After drawing a five-pointed star, we should think about the rotation and zoom-in changes of the five-pointed star. Use the rotate method of canvas to perform rotation changes, and use scale to perform zoom changes. The specific code is as follows:

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();
}

At this point, We can reuse this method, borrow random values, and draw a starry sky:

for (var i = 0; i < 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);
    }

Next, let us give this starry sky the color of the sky.

 var linearGard=context.createRadialGradient(canvas.width/2,canvas.height,0,canvas.width/2,canvas.height,canvas.height);
    linearGard.addColorStop(1.0,"black");
    linearGard.addColorStop(0.0,"#148EFB");
    context.fillStyle = linearGard;
    context.fillRect(0, 0, canvas.width, canvas.height);

At this point, our starry sky is finished.

2. A crescent moon
Based on the starry sky above, we add a crescent moon. The effect is as follows:

Crescent Moon , that is, two arcs. We can make equations to calculate based on the equal tan values ​​of the angles in the auxiliary lines drawn in the figure below.

The final code is as follows, rot is the rotation angle, and fillColor is the fill color.

function fillMoon(cxt,x1,y1,x2,y2,r,/*option*/rot,/*option*/fillColor){
cxt.save();
    cxt.beginPath();
    cxt.rotate(rot/180*Math.PI);    // 创建开始点
    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)); // 创建弧
    cxt.fillStyle=fillColor||"#fb3";
    cxt.fill();
cxt.restore();
}

3. The Earth

Based on the above, we added a piece of land. The rendering is as follows:

Drawing the Earth The most important thing is to use the bezierCurveTo method to draw the curve. The parameters in bezierCurveTo are calculated. landStyle colors the shape.

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();
}

4. Text

This is the last step, which is the simplest step.

Set the size and color of the text and use fillText to draw the text.

   CXT.save();
    CXT.font="bold 20px Georgia";
    CXT.fillStyle="#fff";
    CXT.fillText("Canvas文字绘制",200,650);
    CXT.fillText("——海上月_天上月",500,700);
    CXT.restore();
}```

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to the php Chinese website

Other related articles!

Recommended reading:

What does class="no-js" mean

Common phrases in Git

A collection of common npm commands for nodejs

How to use canvas to draw a colorful tangram

The above is the detailed content of How to use canvas to draw the starry sky, moon, earth, and add text. For more information, please follow other related articles on the PHP Chinese website!