Home >Web Front-end >H5 Tutorial >Code implementation for drawing arcs using html5 canvas

Code implementation for drawing arcs using html5 canvas

不言Original: 2018-08-06 17:59:532921browse

The content of this article is about the code implementation of HTML5 canvas for drawing arcs. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Draw the arc

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

The diagram corresponding to startingAngle and endingAngle

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

Run results:

2.beginPath() and closePath() do not need to appear in pairs.

beginPath() represents re-planning a path;

closePath() represents ending the current path. If the current path is not closed, it will automatically close the current path. If you do not want to close it, use beginPath() is fine, no need to use closePath().

closePath() has no effect on fill(). Because fill() will also automatically close the current path and then fill it.

Code implementation for drawing arcs using html5 canvas

Related articles