집 >웹 프론트엔드 >H5 튜토리얼 >HTML5 캔버스를 사용하여 호를 그리기 위한 코드 구현

HTML5 캔버스를 사용하여 호를 그리기 위한 코드 구현

不言원래의: 2018-08-06 17:59:532944검색

이 글의 내용은 호 그리기를 위한 HTML5 캔버스의 코드 구현에 관한 것입니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 호 그리기

context.arc(
    centerx, centery, radius,//圆点坐标和半径
    startingAngle,endingAngle,//起始弧度，结束弧度
    anticlockwise = false//默认顺时针
)

시작 각도와 끝 각도의 해당 그림

#🎜 🎜#eg:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>canvas画弧形</title>
</head>

<body>
    <canvas id="canvas">浏览器不支持canvas，请更换浏览器</canvas>
    <script type="text/javascript">
        window.onload = function() {
            var canvas = document.getElementById(&#39;canvas&#39;);
            canvas.width = 1024;
            canvas.height = 768;
            var context = canvas.getContext(&#39;2d&#39;);
            // 绘制状态
            context.arc(300, 300, 200, 0, 1.5 * Math.PI);
            context.lineWidth = 5;
            context.strokeStyle = &#39;blue&#39;;
            context.stroke();
        }
    </script>
</body>

</html>

실행 결과:

2.beginPath() 및 closePath()가 나타날 필요가 없습니다. 쌍으로.

beginPath()는 경로 재계획을 나타냅니다.

closePath()는 현재 경로가 닫히지 않으면 자동으로 현재 경로를 닫습니다. . 원하지 않는 경우 닫힌 경우 closePath() 대신 BeginPath()를 사용하세요.

closePath()는 fill()에 대해 작동하지 않습니다. fill()도 자동으로 현재 경로를 닫은 다음 채우기 때문입니다.

HTML5 캔버스를 사용하여 호를 그리기 위한 코드 구현

관련 기사