एचटीएमएल 5 कैनवास में एक अंडाकार कैसे आकर्षित करें?

Question 1

अंडाकार जैसी आकृति बनाने के लिए एक देशी कार्य प्रतीत नहीं होता है। इसके अलावा, मैं अंडे के आकार की तलाश नहीं कर रहा हूं।

क्या 2 बीज़ियर घटता के साथ एक अंडाकार खींचना संभव है? किसी को उस के साथ समाप्त हो गया?

मेरा उद्देश्य कुछ आंखें खींचना है और वास्तव में सिर्फ आर्क्स का उपयोग करना है। अग्रिम में धन्यवाद।

उपाय

इसलिए स्केल () सभी अगले आकृतियों के लिए स्केलिंग को बदलता है। सहेजें () पहले सेटिंग्स को सहेजता है और स्केलिंग के बिना नए आकार खींचने के लिए सेटिंग्स को पुनर्स्थापित करने के लिए उपयोग किया जाता है।

जानी को धन्यवाद

ctx.save();
ctx.scale(0.75, 1);
ctx.beginPath();
ctx.arc(20, 21, 10, 0, Math.PI*2, false);
ctx.stroke();
ctx.closePath();
ctx.restore();

Question 2

अपडेट:

स्केलिंग विधि स्ट्रोक चौड़ाई की उपस्थिति को प्रभावित कर सकती है
स्केलिंग विधि सही तरीके से करने पर स्ट्रोक की चौड़ाई बरकरार रह सकती है
कैनवास में दीर्घवृत्त विधि है जो क्रोम अब समर्थन करता है
JSBin में अद्यतन परीक्षण जोड़े गए

JSBin परीक्षण उदाहरण (तुलना के लिए अन्य के जवाबों का परीक्षण करने के लिए अद्यतन)

बेज़ियर - ऊपरी बाएँ पर आधारित ड्रॉ जिसमें आयत और चौड़ाई / ऊँचाई होती है
केंद्र के साथ बेजियर - केंद्र और चौड़ाई / ऊंचाई के आधार पर ड्रा
आर्च और स्केलिंग - ड्राइंग सर्कल और स्केलिंग के आधार पर ड्रा
- देखने के देवेन कालरा के जवाब
द्विघात वक्र - चतुर्भुज के साथ ड्रा
- प्रतीत होता है कि परीक्षण काफी समान नहीं है, कार्यान्वयन हो सकता है
- देखें ऑयोपेंट का जवाब
कैनवस इलिप्स - W3C मानक दीर्घवृत्त () विधि का उपयोग करना
- प्रतीत होता है कि परीक्षण काफी समान नहीं है, कार्यान्वयन हो सकता है
- देखिए लोकतर का जवाब

मूल:

यदि आप एक सममित अंडाकार चाहते हैं, तो आप हमेशा त्रिज्या चौड़ाई का एक चक्र बना सकते हैं, और फिर इसे उस ऊँचाई तक माप सकते हैं जिसे आप चाहते हैं ( संपादित करें: यह नोटिस स्ट्रोक की चौड़ाई को प्रभावित करेगा - एकडामेली का उत्तर देखें), लेकिन यदि आप दीर्घवृत्त का पूर्ण नियंत्रण चाहते हैं यहाँ bezier घटता का उपयोग करने का एक तरीका है।

<canvas id="thecanvas" width="400" height="400"></canvas>

<script>
var canvas = document.getElementById('thecanvas');

if(canvas.getContext) 
{
  var ctx = canvas.getContext('2d');
  drawEllipse(ctx, 10, 10, 100, 60);
  drawEllipseByCenter(ctx, 60,40,20,10);
}

function drawEllipseByCenter(ctx, cx, cy, w, h) {
  drawEllipse(ctx, cx - w/2.0, cy - h/2.0, w, h);
}

function drawEllipse(ctx, x, y, w, h) {
  var kappa = .5522848,
      ox = (w / 2) * kappa, // control point offset horizontal
      oy = (h / 2) * kappa, // control point offset vertical
      xe = x + w,           // x-end
      ye = y + h,           // y-end
      xm = x + w / 2,       // x-middle
      ym = y + h / 2;       // y-middle

  ctx.beginPath();
  ctx.moveTo(x, ym);
  ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
  ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
  ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
  ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
  //ctx.closePath(); // not used correctly, see comments (use to close off open path)
  ctx.stroke();
}

</script>

Question 3

यहाँ कहीं और समाधान का एक सरलीकृत संस्करण है। मैं एक विहित चक्र, अनुवाद और पैमाने और फिर स्ट्रोक खींचता हूं।

function ellipse(context, cx, cy, rx, ry){
        context.save(); // save state
        context.beginPath();

        context.translate(cx-rx, cy-ry);
        context.scale(rx, ry);
        context.arc(1, 1, 1, 0, 2 * Math.PI, false);

        context.restore(); // restore to original state
        context.stroke();
}

Question 4

कैनवास के लिए अब एक देशी दीर्घवृत्त फ़ंक्शन है, जो आर्क फ़ंक्शन के समान है, हालांकि अब हमारे पास दो त्रिज्या मान हैं और एक रोटेशन है जो भयानक है।

दीर्घवृत्त (x, y, त्रिज्या, त्रिज्या, रोटेशन, प्रारंभअंजली, अंतएंगल, प्रतिवेदक)

लाइव डेमो

ctx.ellipse(100, 100, 10, 15, 0, 0, Math.PI*2);
ctx.fill();

वर्तमान में केवल Chrome में काम करना प्रतीत होता है

Question 5

सरल अंडाकार के लिए बेज़ियर वक्र दृष्टिकोण महान है। अधिक नियंत्रण के लिए, आप x और y त्रिज्या (त्रिज्या, त्रिज्या?) के लिए विभिन्न मूल्यों के साथ दीर्घवृत्त खींचने के लिए एक लूप का उपयोग कर सकते हैं।

एक रोटेशनएंगल पैरामीटर को जोड़ने से अंडाकार को किसी भी कोण से अपने केंद्र के चारों ओर घुमाया जा सकता है। आंशिक अंडाकार को उस रेंज (var i) को बदलकर खींचा जा सकता है जिस पर लूप चलता है।

इस तरह से अंडाकार का प्रतिपादन आपको लाइन पर सभी बिंदुओं के सटीक x, y स्थान को निर्धारित करने की अनुमति देता है। यह उपयोगी है अगर अन्य वस्तुओं का आसन अंडाकार के स्थान और अभिविन्यास पर निर्भर करता है।

यहाँ कोड का एक उदाहरण है:

for (var i = 0 * Math.PI; i < 2 * Math.PI; i += 0.01 ) {
    xPos = centerX - (radiusX * Math.sin(i)) * Math.sin(rotationAngle * Math.PI) + (radiusY * Math.cos(i)) * Math.cos(rotationAngle * Math.PI);
    yPos = centerY + (radiusY * Math.cos(i)) * Math.sin(rotationAngle * Math.PI) + (radiusX * Math.sin(i)) * Math.cos(rotationAngle * Math.PI);

    if (i == 0) {
        cxt.moveTo(xPos, yPos);
    } else {
        cxt.lineTo(xPos, yPos);
    }
}

यहां एक इंटरैक्टिव उदाहरण देखें: http://www.scienceprimer.com/draw-oval-html5-canvas

Question 6

आपको एक दीर्घवृत्त को पुन: उत्पन्न करने के लिए 4 बीज़ियर घटता (और एक जादुई संख्या) की आवश्यकता होती है। यहाँ देखें:

www.tinaja.com/glib/ellipse4.pdf

दो बेज़ियर एक दीर्घवृत्त को ठीक से पुन: पेश नहीं करते हैं। इसे साबित करने के लिए, उपरोक्त ऊंचाई और चौड़ाई के साथ 2 बीज़ियर समाधानों में से कुछ को आज़माएं - उन्हें आदर्श रूप से एक सर्कल होना चाहिए, लेकिन वे नहीं करेंगे। वे अभी भी अंडाकार दिखेंगे जो यह साबित करने के लिए जाता है कि वे वह नहीं कर रहे हैं जो वे करने वाले हैं।

यहाँ कुछ है जो काम करना चाहिए:

http://jsfiddle.net/BsPsj/

यहाँ कोड है:

function ellipse(cx, cy, w, h){
    var ctx = canvas.getContext('2d');
    ctx.beginPath();
    var lx = cx - w/2,
        rx = cx + w/2,
        ty = cy - h/2,
        by = cy + h/2;
    var magic = 0.551784;
    var xmagic = magic*w/2;
    var ymagic = h*magic/2;
    ctx.moveTo(cx,ty);
    ctx.bezierCurveTo(cx+xmagic,ty,rx,cy-ymagic,rx,cy);
    ctx.bezierCurveTo(rx,cy+ymagic,cx+xmagic,by,cx,by);
    ctx.bezierCurveTo(cx-xmagic,by,lx,cy+ymagic,lx,cy);
    ctx.bezierCurveTo(lx,cy-ymagic,cx-xmagic,ty,cx,ty);
    ctx.stroke();


}

Question 7

आप गैर-समान स्केलिंग का उपयोग करके भी देख सकते हैं। आप एक्स और वाई स्केलिंग प्रदान कर सकते हैं, इसलिए बस एक्स या वाई स्केलिंग को दूसरे से बड़ा सेट करें, और एक सर्कल बनाएं, और आपके पास एक दीर्घवृत्त होगा।

Question 8

मैंने इस कोड का थोड़ा रूपांतरण किया किया (आंशिक रूप से एंड्रयू स्टॉरोसिक द्वारा प्रस्तुत किया गया) पीपुल्स के लिए जो इतना सामान्य दीर्घवृत्त नहीं चाहते हैं और जिनके पास केवल अधिक अर्ध-अक्ष है और दीर्घवृत्त का डेटा (खगोलीय जावास्क्रिप्ट खिलौने के लिए अच्छा है) , उदाहरण के लिए)।

यहां आप यह याद रखें कि iड्राइंग में अधिक सटीक होने के लिए कोई भी व्यक्ति कदम उठा सकता है:

/* draw ellipse
 * x0,y0 = center of the ellipse
 * a = greater semi-axis
 * exc = ellipse excentricity (exc = 0 for circle, 0 < exc < 1 for ellipse, exc > 1 for hyperbole)
 */
function drawEllipse(ctx, x0, y0, a, exc, lineWidth, color)
{
    x0 += a * exc;
    var r = a * (1 - exc*exc)/(1 + exc),
        x = x0 + r,
        y = y0;
    ctx.beginPath();
    ctx.moveTo(x, y);
    var i = 0.01 * Math.PI;
    var twoPi = 2 * Math.PI;
    while (i < twoPi) {
        r = a * (1 - exc*exc)/(1 + exc * Math.cos(i));
        x = x0 + r * Math.cos(i);
        y = y0 + r * Math.sin(i);
        ctx.lineTo(x, y);
        i += 0.01;
    }
    ctx.lineWidth = lineWidth;
    ctx.strokeStyle = color;
    ctx.closePath();
    ctx.stroke();
}

Question 9

मेरा समाधान इन सभी से थोड़ा अलग है। मुझे लगता है कि क्लोज़ेस्ट सबसे अधिक वोट किया गया जवाब है, लेकिन मुझे लगता है कि यह तरीका थोड़ा साफ है और समझने में आसान है।

http://jsfiddle.net/jaredwilli/CZeEG/4/

    function bezierCurve(centerX, centerY, width, height) {
    con.beginPath();
    con.moveTo(centerX, centerY - height / 2);

    con.bezierCurveTo(
        centerX + width / 2, centerY - height / 2,
        centerX + width / 2, centerY + height / 2,
        centerX, centerY + height / 2
    );
    con.bezierCurveTo(
        centerX - width / 2, centerY + height / 2,
        centerX - width / 2, centerY - height / 2,
        centerX, centerY - height / 2
    );

    con.fillStyle = 'white';
    con.fill();
    con.closePath();
}

और फिर इसे इस तरह उपयोग करें:

bezierCurve(x + 60, y + 75, 80, 130);

फिडल में एक युगल उपयोग उदाहरण हैं, साथ ही क्वाड्रैटिक कर्वटेओ का उपयोग करके एक असफल प्रयास किया गया है।

Question 10

मुझे ऊपर बेज़ियर घटता समाधान पसंद है। मैंने देखा कि स्केल भी लाइन की चौड़ाई को प्रभावित करता है इसलिए यदि आप एक दीर्घवृत्त खींचने की कोशिश कर रहे हैं जो कि लंबा है, तो आपका टॉप और बॉटम "साइड" आपके बाएं और दाएं "पक्षों" की तुलना में पतला दिखाई देगा ...

एक अच्छा उदाहरण होगा:

ctx.lineWidth = 4;
ctx.scale(1, 0.5);
ctx.beginPath();
ctx.arc(20, 20, 10, 0, Math.PI * 2, false);
ctx.stroke();

आपको लाइन की चौड़ाई चरम पर दिखानी चाहिए और बाएं और दाएं एपेक्स (एपिसे?) पर दीर्घवृत्त की चौड़ाई आधी है।

Question 11

हाँ, यह दो बीज़ियर कर्व्स के साथ संभव है - यहाँ एक संक्षिप्त ट्यूटोरियल / उदाहरण है: http://www.williammalone.com/briefs/how-to-draw-ellipse-html5-canvas/

Question 12

क्रोम और ओपेरा समर्थन दीर्घवृत्त कैनवास 2d संदर्भ के लिए विधि का , लेकिन IE, एज, फ़ायरफ़ॉक्स और सफारी इसका समर्थन नहीं करते हैं।

हम जेएस द्वारा दीर्घवृत्त विधि को लागू कर सकते हैं या तीसरे पक्ष के पॉलीफिल का उपयोग कर सकते हैं।

ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)

उपयोग उदाहरण:

ctx.ellipse(20, 21, 10, 10, 0, 0, Math.PI*2, true);

आप एक कैनवास-5-पॉलीफिल का उपयोग कर सकते हैं पद्धति प्रदान करने के लिए का ।

या केवल ellipse विधि प्रदान करने के लिए कुछ js कोड पेस्ट करें:

if (CanvasRenderingContext2D.prototype.ellipse == undefined) {
  CanvasRenderingContext2D.prototype.ellipse = function(x, y, radiusX, radiusY,
        rotation, startAngle, endAngle, antiClockwise) {
    this.save();
    this.translate(x, y);
    this.rotate(rotation);
    this.scale(radiusX, radiusY);
    this.arc(0, 0, 1, startAngle, endAngle, antiClockwise);
    this.restore();
  }
}

दीर्घवृत्त १

दीर्घवृत्त २

दीर्घवृत्त ३

दीर्घवृत्त ४

Question 13

यह आकार की तरह दीर्घवृत्त बनाने का एक और तरीका है, हालांकि यह "fillRect ()" फ़ंक्शन का उपयोग करता है इसका उपयोग fillRect () फ़ंक्शन में तर्कों को बदलने के लिए किया जा सकता है।

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Sine and cosine functions</title>
</head>
<body>
<canvas id="trigCan" width="400" height="400"></canvas>

<script type="text/javascript">
var canvas = document.getElementById("trigCan"), ctx = canvas.getContext('2d');
for (var i = 0; i < 360; i++) {
    var x = Math.sin(i), y = Math.cos(i);
    ctx.stroke();
    ctx.fillRect(50 * 2 * x * 2 / 5 + 200, 40 * 2 * y / 4 + 200, 10, 10, true);
}
</script>
</body>
</html>

Question 14

इसके साथ आप एक दीर्घवृत्त के खंड भी खींच सकते हैं:

function ellipse(color, lineWidth, x, y, stretchX, stretchY, startAngle, endAngle) {
    for (var angle = startAngle; angle < endAngle; angle += Math.PI / 180) {
        ctx.beginPath()
        ctx.moveTo(x, y)
        ctx.lineTo(x + Math.cos(angle) * stretchX, y + Math.sin(angle) * stretchY)
        ctx.lineWidth = lineWidth
        ctx.strokeStyle = color
        ctx.stroke()
        ctx.closePath()
    }
}

http://jsfiddle.net/FazAe/1/

Question 15

चूंकि कोई भी सरल दृष्टिकोण का उपयोग करके नहीं आया था, quadraticCurveToमैं उसके लिए एक समाधान जोड़ रहा हूं। बस इसके साथ bezierCurveTo@ स्टीव के उत्तर में कॉल को बदलें :

  ctx.quadraticCurveTo(x,y,xm,y);
  ctx.quadraticCurveTo(xe,y,xe,ym);
  ctx.quadraticCurveTo(xe,ye,xm,ye);
  ctx.quadraticCurveTo(x,ye,x,ym);

आप भी निकाल सकते हैं closePath। अंडाकार हालांकि थोड़ा अलग दिख रहा है।

Question 16

यहां मैंने एक फ़ंक्शन लिखा है जो एसवीजी में दीर्घवृत्त चाप के समान मूल्यों का उपयोग करता है। X1 और Y1 अंतिम निर्देशांक हैं, X2 & Y2 अंत निर्देशांक हैं, त्रिज्या एक संख्या मान है और क्लॉकवाइज़ एक बूलियन मान है। यह आपके कैनवास संदर्भ को पहले ही परिभाषित कर चुका है।

function ellipse(x1, y1, x2, y2, radius, clockwise) {

var cBx = (x1 + x2) / 2;    //get point between xy1 and xy2
var cBy = (y1 + y2) / 2;
var aB = Math.atan2(y1 - y2, x1 - x2);  //get angle to bulge point in radians
if (clockwise) { aB += (90 * (Math.PI / 180)); }
else { aB -= (90 * (Math.PI / 180)); }
var op_side = Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2)) / 2;
var adj_side = Math.sqrt(Math.pow(radius, 2) - Math.pow(op_side, 2));

if (isNaN(adj_side)) {
    adj_side = Math.sqrt(Math.pow(op_side, 2) - Math.pow(radius, 2));
}

var Cx = cBx + (adj_side * Math.cos(aB));            
var Cy = cBy + (adj_side * Math.sin(aB));
var startA = Math.atan2(y1 - Cy, x1 - Cx);       //get start/end angles in radians
var endA = Math.atan2(y2 - Cy, x2 - Cx);
var mid = (startA + endA) / 2;
var Mx = Cx + (radius * Math.cos(mid));
var My = Cy + (radius * Math.sin(mid));
context.arc(Cx, Cy, radius, startA, endA, clockwise);
}

Question 17

यदि आप चाहते हैं कि दीर्घवृत्त पूरी तरह से एक आयत के अंदर फिट हो, तो यह वास्तव में इस तरह है:

function ellipse(canvasContext, x, y, width, height){
  var z = canvasContext, X = Math.round(x), Y = Math.round(y), wd = Math.round(width), ht = Math.round(height), h6 = Math.round(ht/6);
  var y2 = Math.round(Y+ht/2), xw = X+wd, ym = Y-h6, yp = Y+ht+h6, cs = cards, c = this.card;
  z.beginPath(); z.moveTo(X, y2); z.bezierCurveTo(X, ym, xw, ym, xw, y2); z.bezierCurveTo(xw, yp, X, yp, X, y2); z.fill(); z.stroke();
  return z;
}

सुनिश्चित करें कि canvasContext.fillStyle = 'rgba(0,0,0,0)';इस डिजाइन के साथ कोई भरने के लिए नहीं।