HTML5 Canvas Oval Köşeler Oluşturma

HTML5 Canvas kullanarak yuvarlatılmış köşeler oluşturmak için, bir kontrol noktası, bir bitiş noktası ve bir yarıçap tarafından tanımlanan arcTo() yöntemini kullanabiliriz. Çizgilerin birleşme noktalarını ovalleştirmek çizgi birleştirme yazısına bakabilirsiniz.

Çıktı:

Kod:


        <canvas id="canvas" width="578" height="200"></canvas>
        <script>
          var canvas = document.getElementById('canvas');
          var context = canvas.getContext('2d');
          var koseGenislik = 200;
          var koseYukseklik = 100;
          var koseX = 189;
          var koseY = 50;
          var koseOval = 70;
    
          context.beginPath();
          context.moveTo(koseX, koseY);
          context.lineTo(koseX + koseGenislik - koseOval, koseY);
          context.arcTo(koseX + koseGenislik, koseY, koseX + koseGenislik, koseY + koseOval, koseOval);
          context.lineTo(koseX + koseGenislik, koseY + koseYukseklik);
          context.lineWidth = 5;
          context.stroke();
        </script>

var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

var koseGenislik = 200;

var koseYukseklik = 100;

var koseX = 189;

var koseY = 50;

var koseOval = 70;

context.beginPath();

context.moveTo(koseX, koseY);

context.lineTo(koseX + koseGenislik - koseOval, koseY);

context.arcTo(koseX + koseGenislik, koseY, koseX + koseGenislik, koseY + koseOval, koseOval);

context.lineTo(koseX + koseGenislik, koseY + koseYukseklik);

context.lineWidth = 5;

context.stroke();

</script>

EtiketlerHTML5 Canvas Dersleri HTML5 Canvas Örnekleri

HTML5 Canvas Oval Köşeler Oluşturma

Yorum Yap

İptal Et

Bunları da beğenebilirsiniz

Yorum Yap