재미있는 js 구현: 안경을 쓴 웃는 얼굴 제공
- 藏色散人원래의
- 2021-08-02 17:59:272437검색
"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('canvas');
if (canvas.getContext)
{
var context = canvas.getContext('2d');
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!