Fun implementation of js: give you a smiling face wearing glasses-JS Tutorial-php.cn

Fun implementation of js: give you a smiling face wearing glasses

藏色散人

Release： 2021-08-02 17:59:27

Original

2439 people have browsed it

In "js draws two intersecting rectangles and one of them has alpha transparency" we introduced to you how to use javascript to draw two intersecting rectangles and one of them has alpha transparency. Today we will continue to give you Let’s introduce a fun implementation method~

As the title says, “a smiling face wearing glasses”! JavaScript is omnipotent~

First of all, let me give you a picture example:

Fun implementation of js: give you a smiling face wearing glasses

You can write code based on this picture and see how it goes How can I achieve such a picture? There must be more than one method, you can try it locally~

Now I will introduce to you a method, which is achieved by using the moveto() function.

The complete code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body onload="draw();">
<canvas id="canvas" width="250" height="250"></canvas>
<script>
    function draw()
    {
        var canvas = document.getElementById(&#39;canvas&#39;);
        if (canvas.getContext)
        {
            var context = canvas.getContext(&#39;2d&#39;);
            context.beginPath();
            // 外圆
 context.arc(75,75,50,0,Math.PI*2,true);
            context.moveTo(110,75);
            // 嘴巴
 context.arc(75,75,35,0,Math.PI,false);
            // 左眼和右眼
 context.moveTo(55,65);
            context.arc(60,65,5,0,Math.PI*2,true);
            context.arc(90,65,5,0,Math.PI*2,true);
            context.stroke();
        }
    }
    </script>
</body>
</html>

Copy after login

Done! Running this code will produce the same effect as shown above.

So in this code, two important methods moveTo() and arc() methods should be introduced.

moveTo() The method is used to move the path to a specified point in the canvas without creating a line. Its js syntax is "context.moveTo(x,y);", the parameter x represents the x coordinate of the target position of the path, and y represents the y coordinate of the target position of the path.

arc()The method is used to create arcs/curves (used to create circles or partial circles), and its js syntax is "context.arc(x,y,r, sAngle,eAngle,counterclockwise);", note that if you need to create a circle through arc(), please set the starting angle to 0 and the ending angle to 2*Math.PI.

The parameter x is the x coordinate of the center of the circle;

y represents the y coordinate of the center of the circle;

r represents the radius of the circle;

sAngle Represents the starting angle in radians. (The three o'clock position of the arc's circle is 0 degrees);

eAngle represents the end angle, measured in radians.

Counterclockwise is optional and specifies whether drawing should be counterclockwise or clockwise. False = clockwise, true = counterclockwise.

Finally, I would like to recommend the classic course "JavaScript Quick Introduction_Jade Girl Heart Sutra Series" on this platform to everyone. It is free for public welfare ~ everyone is welcome to learn ~

The above is the detailed content of Fun implementation of js: give you a smiling face wearing glasses. For more information, please follow other related articles on the PHP Chinese website!