Live Code Editor Version 2.0

Canvas đường cong 1 RUN

<!DOCTYPE HTML>
<html>
    <head>
        <title>Canvas Vẽ đường cong</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <canvas id="myCanvas" width="578" height="250"></canvas>
        <script>
            var canvas = document.getElementById('myCanvas');
            var context = canvas.getContext('2d');
            
            // Xác đinh tâm là trọng tâm của Canvas
            var x = canvas.width / 2;
            var y = canvas.height / 2;
            
            // bán kính 75px
            var radius = 75;
            
            // Góc bắt đầu là 1.1PI
            var startAngle = 1.1 * Math.PI;
            
            // Góc kết thúc là 1.9PI
            var endAngle = 1.9 * Math.PI;
            
            // Cùng chiều kim đồng hồ
            var counterClockwise = false;
            
            // Vẽ đường cung
            context.beginPath();
            context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
            context.lineWidth = 15;

// line color
            context.strokeStyle = 'black';
            context.stroke();
        </script>
    </body>
</html>