如何用弧方法創建自定義圓？

我想自定義arc()函數能夠做出我自己的圈子，但我無法讓它畫出一個扁平的cicrle。如何用弧方法創建自定義圓？

我怎樣才能做到這一點？

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

<canvas id="myCanvas" width="200" height="150" style="border:1px solid #d3d3d3;"></canvas>

來源

2015-11-01 Alexander Shmatko

老實說，我看不出圖像了一圈。這看起來像一些奇怪的形狀，所以我不認爲一個'arc'命令可以幫助你做到這一點。 – Harry

可能的重複[如何在html5畫布中繪製橢圓？]（http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas） – Jonathon

@Harry我是對不起，我沒有一個體面的圖像編輯器。它應該是平穩的。 –

電弧將總是一個片的圓的。使用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();

<canvas id="myCanvas" width="200" height="150" style="border:1px solid #d3d3d3;"></canvas>

來源

2015-11-01 13:28:24 woestijnrog

但是它使得每一邊的線條寬度是兩倍。 – Blindman67

@ Blindman67看到我的更新。 – woestijnrog

很酷的完美解決方案。@ woestijnrog – Blindman67

爲了保持與現有功能一致，而不必應付不同線寬的複雜性。這個通過掃出一組點來繪製弧線。將步驟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; 
 
}

<canvas class="canC" id="canV" width=256 height=256></canvas>

來源

2015-11-01 14:39:45 Blindman67

Upvote爲三角學 - 你必須愛數學（！），但我必須加倍upvote woestijnrog的答案。 – markE

如何用弧方法創建自定義圓？

回答

相關問題