캔버스로 속이 빈 원과 속이 빈 원을 그리는 방법에 대한 자세한 그래픽 설명
- yulia원래의
- 2018-10-20 14:58:5615614검색
캔버스는 브라우저에서 다양한 그래픽을 그릴 수 있는 새로운 기능입니다. 프론트엔드 작업자로서 캔버스를 사용하여 원을 그릴 수 있나요? 이 기사에서는 캔버스를 사용하여 속이 빈 원을 그리는 방법을 설명하고 캔버스 호를 사용하여 속이 빈 원을 그리는 코드를 공유하며 관심 있는 친구들이 이를 참조할 수 있습니다.
HTML5의 캔버스 arc()를 사용하여 원을 만들 수 있습니다. 먼저 arc()의 구문과 매개변수 설정에 대해 알려드리겠습니다.
구문: arc(x,y,r,sAngle,eAngle,counterclockwise)
x 원 중심의 X축 좌표를 나타냅니다.
y 원 중심의 Y축 좌표를 나타냅니다.
r 원의 반경을 나타냅니다.
sAngle 원의 시작 각도를 나타내며 라디안으로 계산됩니다. 0도는 원의 3시 위치에서
eAngle 원의 끝을 나타냅니다. 각도는 라디안으로 측정됩니다.
counterclockwise는 시계 방향인지 반시계 방향인지 원을 그리는 방향을 지정하는 선택적 값입니다. False는 시계 방향, true는 시계 반대 방향입니다.
참고: arc()를 사용하여 원을 만들려면 시작 위치를 설정해야 합니다. 각도는 0이고 끝 각도는 2*Math로 설정됩니다.PI
원을 그리는 각도는 아래 그림을 참조할 수 있습니다.
예 1: 캔버스를 사용하여 속이 빈 원을 그립니다. 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;">
</body>
<script type="text/javascript">
var c=document.getElementById("myCanvas");//找到 <canvas> 元素:
var ctx=c.getContext("2d"); //创建context对象
ctx.beginPath();//标志开始一个路径
ctx.arc(100,50,40,0,2*Math.PI);//在canvas中绘制圆形
ctx.stroke()
</script>
</html>Rendering:
예제 2: 캔버스를 사용하여 빨간색 실선 원을 그립니다. 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;">
</body>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,50,40,0,2*Math.PI);
ctx.fillStyle="red";
ctx.fill();
ctx.stroke();
</script>
</html>fillStyle 속성은 원의 색상을 설정할 수 있습니다. ctx.fill()은 원에 색상을 적용합니다. 효과는 그림과 같습니다.
위에서는 캔버스로 원을 그리는 방법을 소개합니다. 이 기사가 도움이 되기를 바랍니다.
【관련 추천 튜토리얼】
1. Html5 비디오 튜토리얼
2. JavaScript 비디오 튜토리얼
3.
위 내용은 캔버스로 속이 빈 원과 속이 빈 원을 그리는 방법에 대한 자세한 그래픽 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!