HTML5 Canvas Yarım Daire Çizimi

HTML5 Canvas ile yarım daire oluşturmak için arc() yöntemini kullanarak bir yay oluşturabilir ve bitiş açısını startAngle(başlangıç açısı) + PI olarak tanımlayabiliriz.

Çıktı:

Kod:


        <canvas id="canvas" width="578" height="200"></canvas>
        <script>
          var canvas = document.getElementById('canvas');
          var context = canvas.getContext('2d');
    
          context.beginPath();
          context.arc(288, 75, 70, 0, Math.PI, false);
          context.closePath();
          context.lineWidth = 5;
          context.fillStyle = 'red';
          context.fill();
          context.strokeStyle = '#550000';
          context.stroke();
        </script>

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

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

context.beginPath();

context.arc(288, 75, 70, 0, Math.PI, false);

context.closePath();

context.lineWidth = 5;

context.fillStyle = 'red';

context.fill();

context.strokeStyle = '#550000';

context.stroke();

</script>

EtiketlerHTML5 Canvas Dersleri HTML5 Canvas Örnekleri

HTML5 Canvas Yarım Daire Çizimi

Yorum Yap

İptal Et

Bunları da beğenebilirsiniz

Yorum Yap