HTML5 Canvas ile Bulut Çizelim

Html5 canvas ta bu sefer değişik şekiller çizmeyi deniyelim.

İlk çizeceğim bir bulut hep birlikte inceleyelim. Hepimiz çocukken bişiler çizmiştiriz kalemleler veya boyalarla şuan farklı bir araç kullanarak deniyelim nasıl olacak. Kalem yada boyalarımız yerine kodlarımızı kullanalım 🙂

Bakalım ortaya nasıl bir şekil çıkacak.

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="bulut" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('bulut');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(170, 80);
      context.bezierCurveTo(10, 100, 130, 150, 230, 150);
      context.bezierCurveTo(250, 180, 320, 180, 340, 150);
      context.bezierCurveTo(600, 150, 420, 120, 390, 100);
      context.bezierCurveTo(430, 40, 370, 30, 340, 50);
      context.bezierCurveTo(320, 5, 250, 20, 250, 50);
      context.bezierCurveTo(200, 5, 150, 20, 170, 80);

      context.closePath();
      context.lineWidth = 5;
      context.fillStyle = '#8ED6FF';
      context.fill();
      context.strokeStyle = 'blue';
      context.stroke();
    </script>
  </body>
</html>

Benim deneğimde aşağıdaki gibi bir bulut oluştu 🙂 sizin ki nasıl olacak çok merak ediyorum. Unutmayın kordinatları iyi belirtin. 🙂

bulut