HTML5 Canvas Eğri Çizme

HTML5 Canvas ile bir yol oluşturmak için birden fazla alt yol bağlayabiliriz. Her yeni alt yolun bitiş noktası, yeni bağlam noktası olur. Yolumuzu oluşturan her alt yolu oluşturmak için lineTo(), arcTo(), quadraticCurveTo() ve bezierCurveTo() yöntemlerini kullanabiliriz. Her yeni yol çizmeye başlamak istediğimizde beginPath() yöntemini de kullanabiliriz.

Aşağıdaki görsel görüntüyü oluşturmak için iki tane çizgi, birer tane quadratic Curve ve biezer Curve kullanılmıştır.

Kod:


        <canvas id="canvas" width="578" height="200"></canvas>
        <script>
          var canvas = document.getElementById('canvas');
          var context = canvas.getContext('2d');
    
          context.beginPath();
          context.moveTo(100, 20); //çizimin ilk konumlandığı nokta
    
          // çizgi 1
          context.lineTo(200, 160);
    
          // quadratic curve
          context.quadraticCurveTo(230, 200, 250, 120);
    
          // bezier curve
          context.bezierCurveTo(290, -40, 300, 200, 400, 150);
    
          // çizgi 2
          context.lineTo(500, 90);
    
          context.lineWidth = 5;
          context.strokeStyle = 'blue';
          context.stroke();
    
        </script>

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

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

context.beginPath();

context.moveTo(100, 20); //çizimin ilk konumlandığı nokta

// çizgi 1

context.lineTo(200, 160);

// quadratic curve

context.quadraticCurveTo(230, 200, 250, 120);

// bezier curve

context.bezierCurveTo(290, -40, 300, 200, 400, 150);

// çizgi 2

context.lineTo(500, 90);

context.lineWidth = 5;

context.strokeStyle = 'blue';

context.stroke();

</script>

EtiketlerHTML5 Canvas Dersleri HTML5 Canvas Örnekleri

HTML5 Canvas Eğri Çizme

Yorum Yap

İptal Et

Bunları da beğenebilirsiniz

Yorum Yap