需要使用ctx.arcTo(), 参数是两个控制点的坐标, 比如下面的例子: 

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
</head> 
 
<body> 
    <canvas id="canv" width="300" height="300"></canvas> 
    <script> 
        function draw() { 
            var canvas = document.getElementById('canv'); 
            if (!canvas.getContext) return; 
            var ctx = canvas.getContext("2d"); 
            ctx.beginPath(); 
            ctx.moveTo(50, 50); 
            //参数1、2:控制点1坐标   参数3、4:控制点2坐标  参数4:圆弧半径 
            ctx.arcTo(200, 50, 200, 200, 140); 
            ctx.lineTo(200, 200) 
            ctx.stroke(); 
 
            // 绘制控制点 
            ctx.beginPath(); 
            ctx.rect(50, 50, 5, 5); 
            ctx.rect(200, 50, 5, 5) 
            ctx.rect(200, 200, 5, 5) 
            ctx.fill(); 
        } 
        draw(); 
    </script> 
</body> 
 
</html>

 

 

注意: 

1. ctx.arcTo() 可以绘制与两条直线相切的圆弧;

2. ctx.rect() 可以绘制闭合的矩形; 

function draw() { 
    var canvas = document.getElementById('canv'); 
    if (!canvas.getContext) return; 
    var ctx = canvas.getContext("2d"); 
    ctx.beginPath(); 
    ctx.rect(100, 100, 100, 50); 
    ctx.stroke(); 
} 
draw();

 

发布评论

分享到:

IT源码网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

怎样绘制圆弧讲解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。