재미있는 js 구현: 안경을 쓴 웃는 얼굴 제공-JS 튜토리얼-php.cn

재미있는 js 구현: 안경을 쓴 웃는 얼굴 제공

藏色散人

풀어 주다： 2021-08-02 17:59:27

원래의

2478명이 탐색했습니다.

"js는 두 개의 교차하는 직사각형을 그리고 그 중 하나는 알파 투명도를 갖습니다"에서 우리는 자바스크립트를 사용하여 두 개의 교차하는 직사각형을 그리는 방법을 소개했으며 그 중 하나는 알파 투명도를 가지고 있습니다. 오늘은 계속해서 재미있는 구현을 소개하겠습니다. 방법~

제목 그대로 "안경 쓴 웃는 얼굴"! 자바스크립트는 전능합니다~

먼저 그림 예를 보여드리겠습니다:

재미있는 js 구현: 안경을 쓴 웃는 얼굴 제공

이 그림을 기반으로 코드를 작성하고 어떻게 이런 그림을 얻을 수 있는지 알아보세요. 여러 가지 방법이 있을 텐데요, 로컬에서 시도해 볼 수 있습니다~

이제 moveto() 함수를 사용하여 구현하는 방법을 소개하겠습니다. moveto()函数来实现。

完整代码如下：

<!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>

로그인 후 복사

搞定！运行该代码会出现跟上图一样的效果。

那么在这段代码中，要介绍2个重要的方法moveTo()和arc()方法。

moveTo() 方法用于把路径移动到画布中的指定点，不创建线条，其js语法是“context.moveTo(x,y);”，参数x表示路径的目标位置的 x 坐标，y表示路径的目标位置的 y 坐标。

arc()方法用于创建弧/曲线（用于创建圆或部分圆），其js语法是“context.arc(x,y,r,sAngle,eAngle,counterclockwise);

완전한 코드는 다음과 같습니다:

rrreee

완료! 이 코드를 실행하면 위에 표시된 것과 동일한 효과가 나타납니다.

그래서 이 코드에는 두 가지 중요한 메서드인 moveTo()와 arc() 메서드가 도입되었습니다.

moveTo() 메서드는 선을 만들지 않고 캔버스의 지정된 지점으로 경로를 이동하는 데 사용됩니다. 해당 js 구문은 "

context.moveTo(x,y);입니다. code> ”에서 매개변수 x는 경로의 대상 위치의 x 좌표를 나타내고, y는 경로의 대상 위치의 y 좌표를 나타냅니다. <p></p>
<code>arc()

메서드는 호/곡선(원 또는 부분 원을 만드는 데 사용됨)을 만드는 데 사용되며 해당 js 구문은 "context.arc(x,y,r,sAngle)입니다. ,eAngle ,counterclockwise);", arc()를 통해 원을 만들어야 하는 경우 시작 각도를 0으로 설정하고 끝 각도를 2*Math.PI로 설정하세요.

매개변수 (호 원의 3시 위치는 0도입니다.)

eAngle은 라디안으로 측정된 끝 각도를 나타냅니다.

counterclockwise는 선택 사항으로, 그림을 시계 반대 방향으로 할지 시계 방향으로 할지 지정합니다. 거짓 = 시계 방향, 참 = 시계 반대 방향.

마지막으로, 공익을 위해 무료로 제공되는 이 플랫폼의 고전 강좌 "🎜JavaScript 빠른 소개_옥녀심경 시리즈🎜"를 여러분께 추천하고 싶습니다. 누구나 학습하실 수 있습니다~🎜

위 내용은 재미있는 js 구현: 안경을 쓴 웃는 얼굴 제공의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!