Javascript 如何仅绘制弧的这一部分？_Javascript_Html_Canvas_Geometry_Geometric Arc

Javascript 如何仅绘制弧的这一部分？

javascript html canvas geometry

Javascript 如何仅绘制弧的这一部分？,javascript,html,canvas,geometry,geometric-arc,Javascript,Html,Canvas,Geometry,Geometric Arc,请看这张照片：我知道p1、p2和中心，它们是二维点。我还知道角p1-中心p2和半径r 如何使用画布的“函数arc（）”仅绘制圆弧的填充部分编辑我真正需要做的是，给定2个点和一个角度，在这2个点之间画一条曲线，这样p1-中心-p2角度就是给定的角度我要做的是计算圆心和半径，其中有两个点，现在我需要画一条连接p1和p2的线，并且有给定的角度。这是我用来计算圆环中心的函数（该函数工作正常）该函数有助于计算圆中各点的角度 function drawArcPart(cx, cy, radi

请看这张照片：

我知道p1、p2和中心，它们是二维点。我还知道角p1-中心p2和半径r

如何使用画布的“函数arc（）”仅绘制圆弧的填充部分

编辑

我真正需要做的是，给定2个点和一个角度，在这2个点之间画一条曲线，这样p1-中心-p2角度就是给定的角度

我要做的是计算圆心和半径，其中有两个点，现在我需要画一条连接p1和p2的线，并且有给定的角度。这是我用来计算圆环中心的函数（该函数工作正常）

该函数有助于计算圆中各点的角度

function drawArcPart(cx, cy, radius, p1x, p1y, angle) {

    var x = p1x - cx;
    var y = p1y - cy;

    var startAngle = Math.atan2(y,x);
    var endAngle = startAngle - angle;

    var ctx = document.getElementById('canvas').getContext('2d');
    ctx.fillStyle='black';
    ctx.beginPath();
    ctx.arc(cx, cy, radius, startAngle, endAngle, true);
    ctx.fill();
}

我已将此JavaScript上载到，并带有一个扩展，该扩展还绘制了要点和两个示例。

试试这个

<html>
    <head></head>
<body onload="drawShape();">
<div>
    <canvas id="tutorial" width="150" height="200"></canvas>
</div>
<SCRIPT type="text/javascript">
function drawShape(){
    // get the canvas element using the DOM
    var canvas = document.getElementById('tutorial');
    // Make sure we don't execute when canvas isn't supported
    if (canvas.getContext){
        var ctx = canvas.getContext('2d');

        ctx.beginPath();
        var x          = 100;               // x coordinate
        var y          = 100;               // y coordinate
        var radius     = 100;                    // Arc radius
        var startAngle = (Math.PI)-((Math.PI)/4);                     // Starting point on circle
        var endAngle   = (Math.PI)+((Math.PI)/4); // End point on circle
        ctx.arc(x,y,radius,startAngle,endAngle, false);    
        ctx.fill();
    } else {
        alert('You need Safari or Firefox 1.5+ to see this demo.');
    }
}
</SCRIPT>
</body>
</html>


函数drawShape（）{
//使用DOM获取画布元素
var canvas=document.getElementById（'tutorial'）；
//确保在画布不受支持时不执行
if（canvas.getContext）{
var ctx=canvas.getContext（'2d'）；
ctx.beginPath（）；
var x=100；//x坐标
变量y=100；//y坐标
var radius=100；//弧半径
var startAngle=（Math.PI）-（Math.PI）/4）；//圆上的起点
var endAngle=（Math.PI）+（Math.PI）/4；//圆上的端点
弧（x，y，半径，星形，端角，假）；
ctx.fill（）；
}否则{
警报（'您需要Safari或Firefox 1.5+才能看到此演示'）；
}
}

这是一个修改后的示例

结果是

这就是你想要的吗？

但是我画了一些我不想删除的东西。我真正需要的是：moveTo（p1）arcTo（p2，radius）当p1的x分量与p2不同时，这似乎不起作用：当然：p1=（100100）p2=（100300）center=（200200）radius=100*sqrt（2）另一个：p1=（100100）p2=（150300）中心=（225175）半径=145.77我可以为你提供一个函数，计算中心和半径，给定2个点和一个角度（这是我正在使用的）。顺便说一句，我编辑了主要帖子，以充分解释我试图实现的目标。

<html>
    <head></head>
<body onload="drawShape();">
<div>
    <canvas id="tutorial" width="150" height="200"></canvas>
</div>
<SCRIPT type="text/javascript">
function drawShape(){
    // get the canvas element using the DOM
    var canvas = document.getElementById('tutorial');
    // Make sure we don't execute when canvas isn't supported
    if (canvas.getContext){
        var ctx = canvas.getContext('2d');

        ctx.beginPath();
        var x          = 100;               // x coordinate
        var y          = 100;               // y coordinate
        var radius     = 100;                    // Arc radius
        var startAngle = (Math.PI)-((Math.PI)/4);                     // Starting point on circle
        var endAngle   = (Math.PI)+((Math.PI)/4); // End point on circle
        ctx.arc(x,y,radius,startAngle,endAngle, false);    
        ctx.fill();
    } else {
        alert('You need Safari or Firefox 1.5+ to see this demo.');
    }
}
</SCRIPT>
</body>
</html>