如何使用圆弧方法创建自定义圆？答案

【问题标题】：How to create a custom circle with arc method?如何使用圆弧方法创建自定义圆？
【发布时间】：2016-02-01 10:20:26
【问题描述】：

我想自定义arc() 函数来制作我自己的圆，但我不能让它画一个扁平的圆。

我该怎么做？

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();

&lt;canvas id="myCanvas" width="200" height="150" style="border:1px solid #d3d3d3;"&gt;&lt;/canvas&gt;

【问题讨论】：

老实说，我没有在图像中看到一个圆圈。它看起来像一些奇怪的形状，所以我认为单个 arc 命令无法帮助您解决这个问题。
How to draw an oval in html5 canvas?的可能重复
@Harry 很抱歉我没有像样的图像编辑器。它应该是平滑的。
好的，如果它应该看起来更像一个椭圆，并且 Y 轴的下半部分变平，那么看看在链接线程中创建椭圆的方法。 Here 是该答案的修改版本以帮助您。
或者，如果你正在寻找一个平底的半圆，那么在arc命令中使用1 * Math.PI而不是2 * Math.PI，并在它之后使用closePath。

标签： javascript css html canvas

【解决方案1】：

弧永远是圆的一部分。使用scale 将您的圆转换为椭圆：

编辑：使用保存和恢复来保持画布状态。这将保持线宽不变。

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.lineWidth=5;
ctx.save();
ctx.beginPath();
ctx.scale(2,1);
ctx.arc(50, 75, 40, 0, 2*Math.PI);
ctx.restore();
ctx.stroke();

&lt;canvas id="myCanvas" width="200" height="150" style="border:1px solid #d3d3d3;"&gt;&lt;/canvas&gt;

【讨论】：

但它使线宽每边宽两倍。
酷完美解决方案.@woestijnrog
等等....哇！ 8-)) 这是一个我以前从未见过的好技巧（在抚摸之前取消修改画布状态以使笔触统一）。如果可以的话，请加倍支持。

【解决方案2】：

使其与现有功能保持一致，而不必处理变化线宽的复杂性。这个通过扫出一组点来绘制弧线。将步骤 calc 中的 2 更改为更高的数字以使代码运行得更快，或将 2 减少为 1 以获得更慢但更好的质量。让它小于一个是没有意义的

// set up code;
var canvas = document.getElementById("canV");
var ctx = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height
ctx.clearRect(0,0,cw,ch)
ctx.globaleAlpha = 1;


// function to draw a arc with two radius wr the width radius
// and hr the height radius; start end are the start and end angles
function arc2(x, y, wr, hr, start, end){
    var i, xx, yy, step;
    step = 2 / Math.max(wr,hr); // get number of steps around
    for(i = start; i <= end; i+= step){ // from start to end
        if(i > end -step / 2){  // ensure that there is no floating
            i = end;              // point error at end of sweep
        }
        xx = Math.cos(i) * wr + x;      // calculate point on circle
        yy = Math.sin(i) * hr + y;
        if(i === start){                // if first Point move to
            ctx.moveTo(xx,yy);
        }else{
            ctx.lineTo(xx,yy);
        }
    }// all done return;
}
// demo to draw circles till the cows come home
var circleDraw = function () {
    var x, y, rw, rh;
    // get some randoms numbers for circles
    x = Math.random() * (cw / 2) + cw / 4;
    y = Math.random() * (ch / 2) + ch / 4;
    rw = Math.random() * ch / 4 + 20;
    rh = Math.random() * ch / 4 + 20;
    ctx.strokeStyle = "hsl(" + Math.floor(Math.random() * 260) + ",100%,50%)";
        ctx.fillStyle = "hsl(" + Math.floor(Math.random() * 260) + ",100%,50%)";
        ctx.lineWidth = Math.random() * 10;
  
    ctx.beginPath();
  
    // draw the arc with new function
    arc2(x, y, rw, rh, 0, Math.PI * 2);
    
    ctx.closePath(); // close the path
  
   // fill and or stoke it
    if (Math.random() > 0.5) {
        ctx.fill();
    }
    if (Math.random() > 0.5) {
        ctx.stroke();
    }
    setTimeout(circleDraw, 200);
}
setTimeout(circleDraw, 200);

.canC {
    width:256px;
    height:256px;
}

&lt;canvas class="canC" id="canV" width=256 height=256&gt;&lt;/canvas&gt;

【讨论】：

支持三角函数——你必须热爱数学（！），但我必须加倍支持 woestijnrog 的答案。