如何在HTML5畫布上繪製圓圈作爲單獨的畫布？

我正在開發一個HTML5項目。因此，我在繪圖圈中遇到問題。我有裝載圖像的畫布。當我要繪製一個圓時，我正在創建一個新的畫布（動態），在其中繪製圓。但是Circle沒有正確繪製。我該如何擺脫這個問題？如何在HTML5畫布上繪製圓圈作爲單獨的畫布？

編輯： -

繪製代碼如下： -

getMouse(e); 
x2=mx; y2=my; 
var width=x2-x1; 
var height=y2-y1; 
annCanvas.style.position = "absolute"; 

annCanvas.style.left=""+x1+"px"; 
annCanvas.style.top=""+y1+"px"; 
annCanvas.width=width+4; 
annCanvas.height=height+4; 
annCanvas.style.zIndex="100000"; 

document.getElementById("canvas").appendChild(annCanvas); 

var kappa = .5522848; 
ox = ((width)/2) * kappa, // control point offset horizontal 
oy = ((height)/2) * kappa, // control point offset vertical 
xe =(width),   // x-end 
ye =(height),   // y-end 
xm = (width)/ 2,  // x-middle 
ym = (height)/2;  // y-middle 
annCanvasContext=annCanvas.getContext('2d'); 
annCanvasContext.beginPath(); 
annCanvasContext.lineWidth=4; 
annCanvasContext.moveTo(2, ym); 
annCanvasContext.bezierCurveTo(2, ym - oy, xm - ox, 2, xm, 2); 
annCanvasContext.bezierCurveTo(xm + ox, 2, xe, ym - oy, xe, ym); 
annCanvasContext.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye); 
annCanvasContext.bezierCurveTo(xm - ox, ye, 2, ym + oy, 2, ym); 
annCanvasContext.closePath(); 
annCanvasContext.stroke();

如果更改的lineWidth至10或15，它得到不同的形狀，而不是圓形的。

來源

2012-09-05 Shanky

提供一些代碼，或者更好的指定problem..what意思「沒有正確繪製」？ – simekadam

Jeremy和Simekadam： - 「不能正確繪製」意味着「當我們改變邊界寬度時，它的形狀會發生變化。 – Shanky

你可以試試這個代碼：

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

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> 
 
    Your browser does not support the HTML5 canvas tag. 
 
</canvas>

來源

2012-09-05 09:16:38 Neji

先生我試過了，但我想在一個單獨的畫布中繪製圓圈。對於運行時的每個圓形繪圖，圓形將在上面提到的新畫布內繪製。 – Shanky

是的，你可以使用上面的邏輯並在一個新的畫布元素中畫圓並追加它！我想大多數創建一個新的畫布和追加它的邏輯已經與你同在！你爲什麼不附加你的邏輯和我的？ – Neji

Thanks.I已合併您的邏輯和我的邏輯。它正在工作，但它在運行時增加我的畫布大小和圓弧半徑時出現問題（鼠標移動）。我該如何解決它。 – Shanky

如何在HTML5畫布上繪製圓圈作爲單獨的畫布？

回答

相關問題