How to use canvas to draw the starry sky, moon, earth, and add text-H5 Tutorial-php.cn

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

php中世界最好的语言

Release： 2018-03-14 09:57:24

Original

3858 people have browsed it

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

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

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

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

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

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.

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

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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:

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

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.

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

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

Copy after login

3. The Earth

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

3508659-e056b8ad8871b6aHow to use canvas to draw the starry sky, moon, earth, and add text

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

Copy after login

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

Copy after login

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