HTML5 Canvas Daire Çizme

HTML5 Canvas ile bir daire çizmek için, arc() yöntemini kullanarak başlangıç açısını 0 ve bitiş açısını 2 * PI tanımlayarak tam bir yay oluşturabiliriz.

Çıktı:

Kod:


        <canvas id="canvas" width="578" height="200"></canvas>
        <script>
          var canvas = document.getElementById('canvas');
          var context = canvas.getContext('2d');
          var centerX = canvas.width / 2;
          var centerY = canvas.height / 2;
          var radius = 70;
    
          context.beginPath();
          context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
          context.fillStyle = 'green';
          context.fill();
          context.lineWidth = 5;
          context.strokeStyle = '#003300';
          context.stroke();
        </script>

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

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

var centerX = canvas.width / 2;

var centerY = canvas.height / 2;

var radius = 70;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = 'green';

context.fill();

context.lineWidth = 5;

context.strokeStyle = '#003300';

context.stroke();

</script>

EtiketlerHTML5 Canvas Dersleri HTML5 Canvas Örnekleri

HTML5 Canvas Daire Çizme

Yorum Yap

İptal Et

Bunları da beğenebilirsiniz

Yorum Yap