كيف أرسم شكل بيضوي باستخدام canvas على html5؟

Badraoui · 4 يناير 2016

أعلم تمام العلم أن html5 اتت بأشياء جديدة كثيرة، منها استخدام canvas لرسم أشكال هندسية على صفحات الويب، وأريد رسم شكل بيضوي، كيف ذلك؟

تم التعديل في 4 يناير 2016 بواسطة Badraoui

E.Nourddine · 4 يناير 2016

سنحاول رسم الشكل البيضوي عبر استعمال لخاصية drawEllipsWithBezier على Javascript، وذلك بإعطائها العديد من القيم الخاصة بحجمها، وكذا خاصية اللون، بهذه الطريقة:

drawEllipseWithBezier(ctx, 10, 10, 200, 60, 'blue');

ونستعمل في المثال التطبيقي التالي، رسماً لعدة دوائر بيضوية، بهذا الكود:

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>JS Bin</title>
  </head>
  <body>
    <canvas id="thecanvas" width="800" height="800"></canvas>

    <script>
      var canvas = document.getElementById('thecanvas');
      if(canvas.getContext) 
      {
        var ctx = canvas.getContext('2d');
        drawEllipseWithBezier(ctx, 10, 10, 200, 60, 'blue');
        drawEllipseWithBezierByCenter(ctx, 110, 110, 200, 60, '#0099ff');
        drawEllipseWithEllipse(ctx, 110, 180, 100, 30, 'red');
        drawEllipseWithArcAndScale(ctx, 110, 250, 100, 30, 'orange');
        drawEllipseWithQuatraticCurve(ctx, 10, 290, 200, 60, 'green');
      }

      //
      function drawEllipseWithEllipse(ctx, cx, cy, rx, ry, style) {
        if(ctx.ellipse)
        {
          ctx.save();
          ctx.beginPath();
          ctx.ellipse(cx, cy, rx, ry, 0, 0, Math.PI*2);
          ctx.strokeStyle=style;
          ctx.stroke();
          ctx.restore();
        }
      }

      // cx,cy - center, r - horizontal radius X
      function drawEllipseWithArcAndScale(ctx, cx, cy, rx, ry, style) {
        ctx.save(); // save state
        ctx.beginPath();
        ctx.translate(cx-rx, cy-ry);
        ctx.scale(rx, ry);
        ctx.arc(1, 1, 1, 0, 2 * Math.PI, false);
        ctx.restore(); // restore to original state
        ctx.save();
        if(style)
          ctx.strokeStyle=style;
        ctx.stroke();
        ctx.restore();
      }

      function drawEllipseWithBezierByCenter(ctx, cx, cy, w, h, style) {
        drawEllipseWithBezier(ctx, cx - w/2.0, cy - h/2.0, w, h, style);
      }

      function drawEllipseWithBezier(ctx, x, y, w, h, style) {
        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.save();
        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);
        if(style)
          ctx.strokeStyle=style;
        ctx.stroke();
        ctx.restore();
      }

      function drawEllipseWithQuatraticCurve(ctx, x, y, w, h, style) {

        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.save();
        ctx.beginPath();
        ctx.moveTo(x, ym);
        ctx.quadraticCurveTo(x,y,xm,y);
        ctx.quadraticCurveTo(xe,y,xe,ym);
        ctx.quadraticCurveTo(xe,ye,xm,ye);
        ctx.quadraticCurveTo(x,ye,x,ym);
        if(style)
          ctx.strokeStyle = style;
        ctx.stroke();
        ctx.restore();
      }
    </script>

  </body>
</html>

لتكون النتيجة كما في الصورة:

مصدر:

رسم دوائر بيضوية الشكل على canvas

تم التعديل في 4 يناير 2016 بواسطة E.Nourddine

كيف أرسم شكل بيضوي باستخدام canvas على html5؟

السؤال

Badraoui

رابط هذا التعليق

شارك على الشبكات الإجتماعية

1 جواب على هذا السؤال

Recommended Posts

E.Nourddine

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية